feat: show loading before user data is read from storage

src/contexts/AuthContext.tsx

@@ -7,6 +7,7 @@ import { storageUserGet, storageUserSave } from '@storage/storageUser';
 type AuthContextData = {
   user: UserDTO;
   signIn: (email: string, password: string) => Promise<void>;
+  isLoadingUserStorageData: boolean;
 };
 
 type AuthContextProviderProps = {
@@ -17,6 +18,7 @@ export const AuthContext = createContext<AuthContextData>({} as AuthContextData)
 
 export function AuthContextProvider({ children }: AuthContextProviderProps) {
   const [user, setUser] = useState<UserDTO>({} as UserDTO);
+  const [isLoadingUserStorageData, setIsLoadingUserStorageData] = useState(true);
 
   async function signIn(email: string, password: string) {
     try {
@@ -33,9 +35,15 @@ export function AuthContextProvider({ children }: AuthContextProviderProps) {
   }
 
   async function loadUserData() {
-    const loggedUser = await storageUserGet();
-    if (loggedUser) {
-      setUser(loggedUser);
+    try {
+      const loggedUser = await storageUserGet();
+      if (loggedUser) {
+        setUser(loggedUser);
+      }
+    } catch (error) {
+      throw error;
+    } finally {
+      setIsLoadingUserStorageData(false);
     }
   }
 
@@ -43,5 +51,9 @@ export function AuthContextProvider({ children }: AuthContextProviderProps) {
     loadUserData();
   }, []);
 
-  return <AuthContext.Provider value={{ user, signIn }}>{children}</AuthContext.Provider>;
+  return (
+    <AuthContext.Provider value={{ user, signIn, isLoadingUserStorageData }}>
+      {children}
+    </AuthContext.Provider>
+  );
 }

src/routes/index.tsx

@@ -7,14 +7,19 @@ import { AppRoutes } from './app.routes';
 
 import { gluestackUIConfig } from '../../config/gluestack-ui.config';
 import { useAuth } from '@hooks/useAuth';
+import { Loading } from '@components/Loading';
 
 export function Routes() {
   const theme = DefaultTheme;
-  const { user } = useAuth();
+  const { user, isLoadingUserStorageData } = useAuth();
   console.debug(user);
 
   theme.colors.background = gluestackUIConfig.tokens.colors.gray700;
 
+  if (isLoadingUserStorageData) {
+    return <Loading />;
+  }
+
   return (
     <Box flex={1} bg="$gray700">
       <NavigationContainer theme={theme}>