Remove suspense boundary from token refresh.

src/bootstrap.tsx

@@ -1,8 +1,8 @@
-import React, { Suspense, useContext, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
 import { IntlProvider, ReactIntlErrorCode } from 'react-intl';
-import { Provider as JotaiProvider, useSetAtom } from 'jotai';
+import { Provider as JotaiProvider } from 'jotai';
 
 import { spinUpStore } from './redux/redux-config';
 import RootApp from './components/RootApp';
@@ -12,13 +12,9 @@ import OIDCProvider from './auth/OIDCConnector/OIDCProvider';
 import messages from './locales/data.json';
 import ErrorBoundary from './components/ErrorComponents/ErrorBoundary';
 import chromeStore from './state/chromeStore';
-import { GenerateId } from '@patternfly/react-core/dist/dynamic/helpers/GenerateId/GenerateId';
-import { isPreviewAtom } from './state/atoms/releaseAtom';
+import { GenerateId } from '@patternfly/react-core/dist/dynamic/helpers/GenerateId/GenerateId';;
 import AppPlaceholder from './components/AppPlaceholder';
-import { ChromeUserConfig, initChromeUserConfig } from './utils/initUserConfig';
-import ChromeAuthContext from './auth/ChromeAuthContext';
-import useSuspenseLoader from '@redhat-cloud-services/frontend-components-utilities/useSuspenseLoader/useSuspenseLoader';
-import { userConfigAtom } from './state/atoms/userConfigAtom';
+import useSessionConfig from './hooks/useSessionConfig';
 
 const isITLessEnv = ITLess();
 const language: keyof typeof messages = 'en';
@@ -39,36 +35,16 @@ const useInitializeAnalytics = () => {
   }, []);
 };
 
-const App = ({ initApp }: { initApp: (...args: Parameters<typeof initChromeUserConfig>) => ChromeUserConfig | undefined }) => {
-  const { getUser, token } = useContext(ChromeAuthContext);
-  // triggers suspense based async call to block rendering until the async call is resolved
-  // TODO: Most of async init should be moved to this method
-  initApp({
-    getUser,
-    token,
-  });
+const App = () => {
+  const loaded = useSessionConfig();
 
   useInitializeAnalytics();
 
-  return <RootApp />;
-};
-
-const ConfigLoader = () => {
-  const initPreview = useSetAtom(isPreviewAtom);
-  const setUserConfig = useSetAtom(userConfigAtom);
-  function initSuccess(userConfig: ChromeUserConfig) {
-    initPreview(userConfig.data.uiPreview);
-    setUserConfig(userConfig);
-  }
-  function initFail() {
-    initPreview(false);
+  if (!loaded) {
+    return <AppPlaceholder />;
   }
-  const { loader } = useSuspenseLoader(initChromeUserConfig, initSuccess, initFail);
-  return (
-    <Suspense fallback={<AppPlaceholder />}>
-      <App initApp={loader} />
-    </Suspense>
-  );
+
+  return <RootApp />;
 };
 
 const entry = document.getElementById('chrome-entry');
@@ -92,7 +68,7 @@ if (entry) {
         >
           <ErrorBoundary>
             <AuthProvider>
-              <ConfigLoader />
+              <App />
             </AuthProvider>
           </ErrorBoundary>
         </IntlProvider>

src/hooks/useSessionConfig.ts

@@ -0,0 +1,43 @@
+import { useContext, useEffect, useState } from 'react';
+import { useSetAtom } from 'jotai';
+import { ChromeUserConfig, initChromeUserConfig } from '../utils/initUserConfig';
+import { isPreviewAtom } from '../state/atoms/releaseAtom';
+import { userConfigAtom } from '../state/atoms/userConfigAtom';
+import ChromeAuthContext from '../auth/ChromeAuthContext';
+
+const useSessionConfig = () => {
+  const [configLoaded, setConfigLoaded] = useState(false);
+  const { getUser, token } = useContext(ChromeAuthContext);
+  const initPreview = useSetAtom(isPreviewAtom);
+  const setUserConfig = useSetAtom(userConfigAtom);
+  function initSuccess(userConfig: ChromeUserConfig) {
+    if (!configLoaded) {
+      // do not re-initialize preview if already loaded
+      // it can "restart" active user sessions. Because toggling preview re-rendes the UI modules, it can cause issues
+      initPreview(userConfig.data.uiPreview);
+    }
+    setUserConfig(userConfig);
+  }
+  function initFail() {
+    initPreview(false);
+  }
+
+  async function initConfig() {
+    try {
+      const config = await initChromeUserConfig({ getUser, token });
+      initSuccess(config);
+      setConfigLoaded(true);
+    } catch (error) {
+      initFail();
+      throw error;
+    }
+  }
+
+  useEffect(() => {
+    initConfig();
+  }, [getUser, token]);
+
+  return configLoaded;
+};
+
+export default useSessionConfig;