From e3ce95fe2ff3b10de89d4b88e18fedaf34668f7b Mon Sep 17 00:00:00 2001 From: Timo K Date: Wed, 28 Feb 2024 20:56:40 +0100 Subject: [PATCH] Don't render app until the widget is set. Signed-off-by: Timo K --- public/index.html | 2 +- src/index.css | 4 ++++ src/useTheme.ts | 9 +++++---- 3 files changed, 10 insertions(+), 5 deletions(-) diff --git a/public/index.html b/public/index.html index 93dd8973..02b587f8 100644 --- a/public/index.html +++ b/public/index.html @@ -13,7 +13,7 @@ - +
diff --git a/src/index.css b/src/index.css index 90794ddc..cbf64a6d 100644 --- a/src/index.css +++ b/src/index.css @@ -157,6 +157,10 @@ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } +/* We use this to not render the page at all until we know the theme.*/ +.nodisplay { + opacity: 0; +} html, body, diff --git a/src/useTheme.ts b/src/useTheme.ts index 99a7e9cd..5cc9021d 100644 --- a/src/useTheme.ts +++ b/src/useTheme.ts @@ -17,15 +17,15 @@ limitations under the License. import { useLayoutEffect, useRef } from "react"; import { useUrlParams } from "./UrlParams"; +import { widget } from "./widget"; export const useTheme = (): void => { const { theme: themeName } = useUrlParams(); const previousTheme = useRef(document.body.classList.item(0)); useLayoutEffect(() => { - // Don't update the current theme if the url does not contain a theme prop. - if (!themeName) return; - const theme = themeName.includes("light") ? "light" : "dark"; - const themeHighContrast = themeName.includes("high-contrast") ? "-hc" : ""; + // If the url does not contain a theme props we default to "dark". + const theme = themeName?.includes("light") ? "light" : "dark"; + const themeHighContrast = themeName?.includes("high-contrast") ? "-hc" : ""; const themeString = "cpd-theme-" + theme + themeHighContrast; if (themeString !== previousTheme.current) { document.body.classList.remove( @@ -37,5 +37,6 @@ export const useTheme = (): void => { document.body.classList.add(themeString); previousTheme.current = themeString; } + document.body.classList.remove("nodisplay"); }, [previousTheme, themeName]); };