diff --git a/.changeset/flat-days-double.md b/.changeset/flat-days-double.md new file mode 100644 index 00000000000..de568fa4497 --- /dev/null +++ b/.changeset/flat-days-double.md @@ -0,0 +1,5 @@ +--- +"@kaizen/components": patch +--- + +Update KaizenProvider to await document before rendering ToastNotificationsList diff --git a/packages/components/src/KaizenProvider/KaizenProvider.tsx b/packages/components/src/KaizenProvider/KaizenProvider.tsx index 0655ad217cd..5348cf495ad 100644 --- a/packages/components/src/KaizenProvider/KaizenProvider.tsx +++ b/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 => ( - - <> - - - {children} - - - - -) +}: KaizenProviderProps): JSX.Element => { + const [documentIsAvailable, setDocumentIsAvailable] = useState(false) + const [notificationsList, setNotificationsList] = useState() + + useEffect(() => { + // SSR does not have a document, which is required for ToastNotificationsList. + // Await document render before rendering the component. + if (document !== undefined) { + setNotificationsList() + setDocumentIsAvailable(true) + } + }, [documentIsAvailable]) + + return ( + + <> + + {notificationsList} + {children} + + + + + ) +} KaizenProvider.displayName = "KaizenProvider"