fix(experience): fix page flashing issue on page load (#7800)

* fix(experience): fix page flashing issue on page load

fix the page flashing issue on the page load

* chore(experience): keep the changeTheme event

keep the changeTheme event

Author: simeng-li

packages/experience/src/Providers/SettingsProvider/use-sign-in-experience.ts

@@ -4,21 +4,26 @@ import PageContext from '@/Providers/PageContextProvider/PageContext';
 import initI18n from '@/i18n/init';
 import { getSignInExperienceSettings } from '@/utils/sign-in-experience';
 
-import useTheme from './use-theme';
+import useTheme, { getThemeBySystemConfiguration } from './use-theme';
 
 const useSignInExperience = () => {
-  const { isPreview, setExperienceSettings } = useContext(PageContext);
+  const { isPreview, setExperienceSettings, setTheme } = useContext(PageContext);
 
   useTheme();
 
   useEffect(() => {
     (async () => {
       const [settings] = await Promise.all([getSignInExperienceSettings(), initI18n()]);
 
-      // Init the page settings and render
+      // Ensure theme is set before page rendering with new settings to avoid page flashing
+      if (settings.color.isDarkModeEnabled) {
+        setTheme(getThemeBySystemConfiguration());
+      }
+
+      // Init the page settings and render the page content
       setExperienceSettings(settings);
     })();
-  }, [isPreview, setExperienceSettings]);
+  }, [isPreview, setExperienceSettings, setTheme]);
 };
 
 export default useSignInExperience;

packages/experience/src/Providers/SettingsProvider/use-theme.ts

@@ -4,7 +4,8 @@ import { useEffect, useContext } from 'react';
 import PageContext from '@/Providers/PageContextProvider/PageContext';
 
 const darkThemeWatchMedia = window.matchMedia('(prefers-color-scheme: dark)');
-const getThemeBySystemConfiguration = (): Theme =>
+
+export const getThemeBySystemConfiguration = (): Theme =>
   darkThemeWatchMedia.matches ? Theme.Dark : Theme.Light;
 
 export default function useTheme() {