From c932dd8c9be86850c83d068186c91a6e0e1ba3c7 Mon Sep 17 00:00:00 2001 From: Timo <16718859+toger5@users.noreply.github.com> Date: Wed, 13 Mar 2024 14:58:21 +0100 Subject: [PATCH] Theme loading without flickering (#2233) --- package.json | 2 +- public/index.html | 3 ++- src/App.tsx | 2 ++ src/FullScreenView.tsx | 6 +++--- src/auth/useInteractiveRegistration.ts | 1 + src/index.css | 4 ++++ src/useTheme.ts | 8 ++++---- src/widget.ts | 2 ++ 8 files changed, 19 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index d3af7fb4..0c297141 100644 --- a/package.json +++ b/package.json @@ -62,7 +62,7 @@ "i18next-http-backend": "^2.0.0", "livekit-client": "^2.0.2", "lodash": "^4.17.21", - "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#8123e9a3f1142a7619758c0a238172b007e3a06a", + "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#d55c6a36df539f6adacc335efe5b9be27c9cee4a", "matrix-widget-api": "^1.3.1", "normalize.css": "^8.0.1", "pako": "^2.0.4", diff --git a/public/index.html b/public/index.html index 93dd8973..df1edfd9 100644 --- a/public/index.html +++ b/public/index.html @@ -13,7 +13,8 @@ - + +
diff --git a/src/App.tsx b/src/App.tsx index d4df1d09..bcd049b1 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -72,7 +72,9 @@ export const App: FC = ({ history }) => { const [loaded, setLoaded] = useState(false); useEffect(() => { Initializer.init()?.then(() => { + if (loaded) return; setLoaded(true); + widget?.api.sendContentLoaded(); }); }); diff --git a/src/FullScreenView.tsx b/src/FullScreenView.tsx index 60edfdbd..78eec7fe 100644 --- a/src/FullScreenView.tsx +++ b/src/FullScreenView.tsx @@ -27,6 +27,7 @@ import styles from "./FullScreenView.module.css"; import { TranslatedError } from "./TranslatedError"; import { Config } from "./config/Config"; import { RageshakeButton } from "./settings/RageshakeButton"; +import { useUrlParams } from "./UrlParams"; interface FullScreenViewProps { className?: string; @@ -37,12 +38,11 @@ export const FullScreenView: FC = ({ className, children, }) => { + const { hideHeader } = useUrlParams(); return (
- - - + {!hideHeader && }
diff --git a/src/auth/useInteractiveRegistration.ts b/src/auth/useInteractiveRegistration.ts index 521496d9..135d1fac 100644 --- a/src/auth/useInteractiveRegistration.ts +++ b/src/auth/useInteractiveRegistration.ts @@ -50,6 +50,7 @@ export const useInteractiveRegistration = (): { useEffect(() => { if (widget) return; + // An empty registerRequest is used to get the privacy policy and recaptcha key. authClient.current!.registerRequest({}).catch((error) => { setPrivacyPolicyUrl( error.data?.params["m.login.terms"]?.policies?.privacy_policy?.en?.url, diff --git a/src/index.css b/src/index.css index 90794ddc..22af0a28 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.*/ +.no-theme { + opacity: 0; +} html, body, diff --git a/src/useTheme.ts b/src/useTheme.ts index 99a7e9cd..50f07ff4 100644 --- a/src/useTheme.ts +++ b/src/useTheme.ts @@ -22,10 +22,9 @@ 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 +36,6 @@ export const useTheme = (): void => { document.body.classList.add(themeString); previousTheme.current = themeString; } + document.body.classList.remove("no-theme"); }, [previousTheme, themeName]); }; diff --git a/src/widget.ts b/src/widget.ts index 1ca6a2e3..32ab780e 100644 --- a/src/widget.ts +++ b/src/widget.ts @@ -158,6 +158,8 @@ export const widget = ((): WidgetHelpers | null => { useE2eForGroupCall: e2eEnabled, fallbackICEServerAllowed: allowIceFallback, }, + // ContentLoaded event will be sent as soon as the theme is set (see useTheme.ts) + false, ); const clientPromise = new Promise((resolve) => {