Account for the config latency

Author: brionmario

frontend/apps/thunder-develop/src/AppWithConfig.tsx

@@ -27,8 +27,12 @@ import App from './App';
 
 const queryClient: QueryClient = new QueryClient();
 
-export default function AppWithConfig(): JSX.Element {
-  const {getClientId, getServerUrl, getClientUrl, getScopes} = useConfig();
+export default function AppWithConfig(): JSX.Element | null {
+  const {getClientId, getServerUrl, getClientUrl, getScopes, isLoading} = useConfig();
+
+  if (isLoading) {
+    return null;
+  }
 
   return (
     <AsgardeoProvider

frontend/apps/thunder-gate/src/AppWithConfig.tsx

@@ -22,8 +22,12 @@ import {useConfig} from '@thunder/shared-contexts';
 import {BrandingProvider} from '@thunder/shared-branding';
 import AppWithTheme from './AppWithTheme';
 
-export default function AppWithConfig(): JSX.Element {
-  const {getServerUrl} = useConfig();
+export default function AppWithConfig(): JSX.Element | null {
+  const {getServerUrl, isLoading} = useConfig();
+
+  if (isLoading) {
+    return null;
+  }
 
   return (
     <AsgardeoProvider

frontend/packages/thunder-shared-contexts/src/Config/ConfigContext.tsx

@@ -79,6 +79,12 @@ export interface ConfigContextType {
    * @returns The client UUID string or undefined if not available
    */
   getClientUuid: () => string | undefined;
+
+  /**
+   * Indicates whether the configuration is still being loaded
+   * @returns True if configuration is loading, false if ready
+   */
+  isLoading: boolean;
 }
 
 /**

frontend/packages/thunder-shared-contexts/src/Config/ConfigProvider.tsx

@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import React, {useMemo, PropsWithChildren} from 'react';
+import {useMemo, useState, useEffect, PropsWithChildren} from 'react';
 import {ThunderConfig} from './types';
 import ConfigContext, {ConfigContextType} from './ConfigContext';
 
@@ -81,11 +81,19 @@ function loadConfig(): ThunderConfig {
  * @public
  */
 export default function ConfigProvider({children}: ConfigProviderProps) {
+  const [isLoading, setIsLoading] = useState(true);
   const config = useMemo(() => loadConfig(), []);
 
+  useEffect(() => {
+    if (config && typeof config === 'object' && config.server && config.client) {
+      setIsLoading(false);
+    }
+  }, [config]);
+
   const contextValue: ConfigContextType = useMemo(
     () => ({
       config,
+      isLoading,
       getServerUrl: () => {
         // If public_url is provided, use it directly
         if (config.server.public_url) {
@@ -133,7 +141,7 @@ export default function ConfigProvider({children}: ConfigProviderProps) {
         return undefined;
       },
     }),
-    [config],
+    [config, isLoading],
   );
 
   return <ConfigContext.Provider value={contextValue}>{children}</ConfigContext.Provider>;