fix: theme on initial and refresh (#3565)

Author: OliwiaGowor

src/components/App/App.tsx

@@ -19,38 +19,38 @@ import { useGetConfiguration } from 'state/configuration/configurationAtom';
 import { useGetExtensions } from 'state/navigation/extensionsAtom';
 import { useGetExtensibilitySchemas } from 'state/extensibilitySchemasAtom';
 import { useGetValidationSchemas } from 'state/validationSchemasAtom';
-
 import { useLoginWithKubeconfigID } from 'components/App/useLoginWithKubeconfigID';
 import { useMakeGardenerLoginRoute } from 'components/Gardener/useMakeGardenerLoginRoute';
 import { useHandleResetEndpoint } from 'components/Clusters/shared';
-import { Preferences } from 'components/Preferences/Preferences';
 import { useResourceSchemas } from './resourceSchemas/useResourceSchemas';
+import { useAfterInitHook } from 'state/useAfterInitHook';
+import useSidebarCondensed from 'sidebar/useSidebarCondensed';
+import { useGetValidationEnabledSchemas } from 'state/validationEnabledSchemasAtom';
+import { useGetKymaResources } from 'state/kymaResourcesAtom';
+
+import { Preferences } from 'components/Preferences/Preferences';
 import { Header } from 'header/Header';
 import { ContentWrapper } from './ContentWrapper/ContentWrapper';
 import { Sidebar } from 'sidebar/Sidebar';
-import { useInitTheme } from './useInitTheme';
 import ClusterList from 'components/Clusters/views/ClusterList';
 import ClusterRoutes from './ClusterRoutes';
-
 import { IncorrectPath } from './IncorrectPath';
+import { Spinner } from 'shared/components/Spinner/Spinner';
+
+import { themeState } from 'state/preferences/themeAtom';
+import { initTheme } from './initTheme';
 
 import './App.scss';
-import { useAfterInitHook } from 'state/useAfterInitHook';
-import useSidebarCondensed from 'sidebar/useSidebarCondensed';
-import { useGetValidationEnabledSchemas } from 'state/validationEnabledSchemasAtom';
-import { useGetKymaResources } from 'state/kymaResourcesAtom';
-import { Spinner } from 'shared/components/Spinner/Spinner';
 
 export default function App() {
+  const theme = useRecoilValue(themeState);
   const language = useRecoilValue(languageAtom);
   const cluster = useRecoilValue(clusterState);
   const setNamespace = useSetRecoilState(activeNamespaceIdState);
   const { namespace } = useUrl();
   const makeGardenerLoginRoute = useMakeGardenerLoginRoute();
   const { t, i18n } = useTranslation();
 
-  useInitTheme();
-
   useEffect(() => {
     setNamespace(namespace);
   }, [setNamespace, namespace]);
@@ -80,6 +80,8 @@ export default function App() {
     return <Spinner />;
   }
 
+  initTheme(theme);
+
   return (
     <div id="html-wrap">
       <Header />

src/components/App/useInitTheme.ts src/components/App/initTheme.tssrc/components/App/useInitTheme.ts renamed to src/components/App/initTheme.ts

@@ -1,11 +1,9 @@
-import { useRecoilValue } from 'recoil';
-import { isSystemThemeDark, themeState } from 'state/preferences/themeAtom';
+import { isSystemThemeDark } from 'state/preferences/themeAtom';
 import { setTheme } from '@ui5/webcomponents-base/dist/config/Theme';
 
 // you must initially load the themeState to
 //let the App know what theme to choose
-export const useInitTheme = () => {
-  const theme = useRecoilValue(themeState);
+export const initTheme = (theme: string) => {
   if (theme === 'light_dark') {
     if (isSystemThemeDark()) setTheme('sap_horizon_dark');
     else setTheme('sap_horizon');