fix(KaizenProvider): await document before rendering ToastNotificatio…

…nsList

.changeset/flat-days-double.md

@@ -0,0 +1,5 @@
+---
+"@kaizen/components": patch
+---
+
+Update KaizenProvider to await document before rendering ToastNotificationsList

packages/components/src/KaizenProvider/KaizenProvider.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useEffect, useState } from "react"
 import { ToastNotificationsList } from "~components/Notification"
 import { ToastNotificationProvider } from "~components/Notification/ToastNotification/context/ToastNotificationContext"
 import { FontDefinitions } from "./subcomponents/FontDefinitions"
@@ -12,16 +12,30 @@ export type KaizenProviderProps = {
 export const KaizenProvider = ({
   children,
   locale = "en",
-}: KaizenProviderProps): JSX.Element => (
-  <OptionalIntlProvider locale={locale}>
-    <>
-      <ToastNotificationProvider>
-        <ToastNotificationsList />
-        {children}
-      </ToastNotificationProvider>
-      <FontDefinitions />
-    </>
-  </OptionalIntlProvider>
-)
+}: KaizenProviderProps): JSX.Element => {
+  const [documentIsAvailable, setDocumentIsAvailable] = useState<boolean>(false)
+  const [notificationsList, setNotificationsList] = useState<JSX.Element>()
+
+  useEffect(() => {
+    // SSR does not have a document, which is required for ToastNotificationsList.
+    // Await document render before rendering the component.
+    if (document !== undefined) {
+      setNotificationsList(<ToastNotificationsList />)
+      setDocumentIsAvailable(true)
+    }
+  }, [documentIsAvailable])
+
+  return (
+    <OptionalIntlProvider locale={locale}>
+      <>
+        <ToastNotificationProvider>
+          {notificationsList}
+          {children}
+        </ToastNotificationProvider>
+        <FontDefinitions />
+      </>
+    </OptionalIntlProvider>
+  )
+}
 
 KaizenProvider.displayName = "KaizenProvider"