chore(react): Fix loading state issues in the React SDK

Author: DonOmalVindula

packages/react/src/components/SignIn/SignIn.tsx

@@ -74,7 +74,6 @@ const SignIn: FC<SignInProps> = (props: SignInProps): ReactElement => {
     totpChildren,
   } = props;
 
-  const [isComponentLoading, setIsComponentLoading] = useState<boolean>(true);
   const [alert, setAlert] = useState<AlertType>();
   const [showSelfSignUp, setShowSelfSignUp] = useState<boolean>(showSignUp);
   const [componentBranding, setComponentBranding] = useState<Branding>();
@@ -104,12 +103,13 @@ const SignIn: FC<SignInProps> = (props: SignInProps): ReactElement => {
     authorize()
       .then((response: AuthApiResponse) => {
         authContext?.setAuthResponse(response);
-        setIsComponentLoading(false);
       })
       .catch((error: Error) => {
         setAlert({alertType: {error: true}, key: keys.common.error});
-        setIsComponentLoading(false);
         throw new AsgardeoUIException('REACT_UI-SIGN_IN-SI-SE01', 'Authorization failed', error.stack);
+      })
+      .finally(() => {
+        authContext.setIsComponentLoading(false);
       });
   }, []);
 
@@ -345,7 +345,7 @@ const SignIn: FC<SignInProps> = (props: SignInProps): ReactElement => {
   /**
    * Renders the circular progress component while the component or text is loading.
    */
-  if (isComponentLoading || isLoading || authContext.isBrandingLoading) {
+  if (authContext.isComponentLoading || isLoading || authContext.isBrandingLoading) {
     return (
       <div className="Box-circularProgressHolder">
         <CircularProgress className="circular-progress" />
@@ -364,14 +364,14 @@ const SignIn: FC<SignInProps> = (props: SignInProps): ReactElement => {
   return (
     <ThemeProvider theme={generateThemeSignIn(componentBranding?.preference.theme)}>
       <UISignIn className="Box-asgardeoSignIn">
-        {showLogo && !(isLoading || isComponentLoading) && (
+        {showLogo && !(isLoading || authContext.isComponentLoading) && (
           <UISignIn.Image className="asgardeo-sign-in-logo" src={imgUrl} />
         )}
         {authContext?.authResponse?.flowStatus !== FlowStatus.SuccessCompleted && !isAuthenticated && (
           <>
             {renderSignIn()}
 
-            {showFooter && !(isLoading || isComponentLoading) && (
+            {showFooter && !(isLoading || authContext.isComponentLoading) && (
               <UISignIn.Footer
                 className="asgardeo-sign-in-footer"
                 copyrights={{children: copyrightText}}

packages/react/src/components/SignIn/fragments/IdentifierFirst.tsx

@@ -18,7 +18,7 @@
 
 import {ScreenType, keys} from '@asgardeo/js';
 import {CircularProgress, Grid, Skeleton} from '@oxygen-ui/react';
-import {PropsWithChildren, ReactElement, useContext, useState} from 'react';
+import {PropsWithChildren, ReactElement, useContext} from 'react';
 import AsgardeoContext from '../../../contexts/asgardeo-context';
 import useTranslations from '../../../hooks/use-translations';
 import BasicAuthProps from '../../../models/basic-auth-props';

packages/react/src/hooks/use-translations.ts

@@ -20,6 +20,7 @@ import {useContext, useEffect, useState} from 'react';
 import I18nContext from '../contexts/i18n-context';
 import {I18n, SetTranslationsProps} from '../models/i18n';
 import UseTranslations from '../models/use-translations';
+import AsgardeoContext from '../contexts/asgardeo-context';
 
 /**
  * `useTranslations` is a custom hook that fetches translations.
@@ -38,15 +39,22 @@ const useTranslations = (props: SetTranslationsProps): UseTranslations => {
 
   const [isLoading, setIsLoading] = useState<boolean>(true);
 
+  const {setIsTextLoading} = useContext(AsgardeoContext);
+  
   const contextValue: I18n = useContext(I18nContext);
   const {text, setTranslations} = contextValue;
 
   useEffect(() => {
     setTranslations({componentLocaleOverride, componentTextOverrides, screen}).then((response: boolean) => {
       setIsLoading(!response);
+      setIsTextLoading(!response);
     });
   }, [componentLocaleOverride, componentTextOverrides, screen, setTranslations]);
 
+  useEffect(() => {
+    setIsTextLoading(isLoading);
+  }, [isLoading]);
+
   /**
    * `t` is a function that retrieves a specific translation from the fetched translations.
    * It takes a key as an argument, which is a string that represents a path to the desired translation.

packages/react/src/models/auth-context.ts

@@ -25,13 +25,15 @@ interface AuthContext {
   isAuthLoading: boolean;
   isAuthenticated: boolean | undefined;
   isBrandingLoading: boolean;
+  isComponentLoading: boolean;
   isGlobalLoading: boolean;
   isTextLoading: boolean;
   onSignOutRef: React.MutableRefObject<Function>;
   setAuthResponse: (response: AuthApiResponse) => void;
   setAuthentication: () => void;
   setIsAuthLoading: (value: boolean) => void;
   setIsBrandingLoading: (value: boolean) => void;
+  setIsComponentLoading: (value: boolean) => void;
   setIsTextLoading: (value: boolean) => void;
   setOnSignIn: (response?: any) => void | Promise<void>;
   setOnSignOut: (response?: any) => void | Promise<void>;

packages/react/src/providers/AsgardeoProvider.tsx

@@ -55,10 +55,10 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = (
   const [accessToken, setAccessToken] = useState<string>('');
   const [isAuthenticated, setIsAuthenticated] = useState<boolean>();
   const [user, setUser] = useState<MeAPIResponse>();
-
   const [isBrandingLoading, setIsBrandingLoading] = useState<boolean>(true);
   const [isTextLoading, setIsTextLoading] = useState<boolean>(true);
   const [isAuthLoading, setIsAuthLoading] = useState<boolean>(false);
+  const [isComponentLoading, setIsComponentLoading] = useState<boolean>(true);
   const [authResponse, setAuthResponse] = useState<AuthApiResponse>();
   const [username, setUsername] = useState<string>('');
 
@@ -137,13 +137,15 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = (
       isAuthLoading,
       isAuthenticated,
       isBrandingLoading,
-      isGlobalLoading: isBrandingLoading || isTextLoading || isAuthLoading,
+      isComponentLoading,
+      isGlobalLoading: isAuthLoading || isBrandingLoading || isComponentLoading || isTextLoading,
       isTextLoading,
       onSignOutRef,
       setAuthResponse,
       setAuthentication,
       setIsAuthLoading,
       setIsBrandingLoading,
+      setIsComponentLoading,
       setIsTextLoading,
       setOnSignIn,
       setOnSignOut,
@@ -158,9 +160,11 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = (
       isAuthLoading,
       isAuthenticated,
       isBrandingLoading,
+      isComponentLoading,
       isTextLoading,
       setAuthResponse,
       setAuthentication,
+      setIsComponentLoading,
       setOnSignIn,
       setOnSignOut,
       setUsername,