ProtectedRoute Update

src/components/routes_helper/ProtectedRoute.tsx

@@ -1,14 +1,18 @@
 import { JSX, useLayoutEffect } from 'react';
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { fetchUserDetails } from '../../store/slices/userSlice';
-import { AppDispatch } from '../../store/store';
+import { AppDispatch, RootState } from '../../store/store';
 
 const ProtectedRoute = ({ children }: { children: JSX.Element }) => {
   const dispatch = useDispatch<AppDispatch>();
-  
-  // useLayoutEffect(() => {
-    dispatch(fetchUserDetails());
-  // }, []);
+  const user = useSelector((state: RootState) => state.user);
+
+  useLayoutEffect(() => {
+    // Fetch only if we don't have user data yet
+    if (user.id === null && user.loading === false) {
+      dispatch(fetchUserDetails());
+    }
+  }, [dispatch, user, status]);
 
   return children;
 };

src/store/slices/userSlice.ts

@@ -32,7 +32,7 @@ const initialState: UserState = {
     language: "",
     account: null,
     picture: undefined,
-    loading: true,
+    loading: false,
     error: null,
     authorized: false,
     accessToken: undefined,