Merge branch '309-393-test-combined-prs' of https://github.com/CodeForPhilly/balancer-main into 309-393-test-combined-prs

Author: taichan03

frontend/src/components/ProtectedRoute/ProtectedRoute.tsx

@@ -2,6 +2,7 @@ import { ReactNode } from 'react';
 import { Navigate, useLocation } from 'react-router-dom';
 import { useSelector } from 'react-redux';
 import { RootState } from '../../services/actions/types';
+import Spinner from '../LoadingSpinner/LoadingSpinner';
 
 interface ProtectedRouteProps {
   children: ReactNode;
@@ -10,13 +11,21 @@ interface ProtectedRouteProps {
 const ProtectedRoute = ({ children }: ProtectedRouteProps) => {
   const location = useLocation();
   const { isAuthenticated } = useSelector((state: RootState) => state.auth);
+  
+  // Wait for auth check to complete (null means not checked yet)
+  // TODO: Consider adding error handling for auth check failures
+  if (isAuthenticated === null) {
+    // TODO: Consider adding accessibility attributes (role="status", aria-live="polite", aria-label)
+    // TODO: Consider preventing Loading State Flash by adding delay before showing spinner
+    return <Spinner />;
+  }
 
   // If not authenticated, redirect to login and include the original location
   if (!isAuthenticated) {
     return <Navigate to="/login" replace state={{ from: location }} />;
   }
 
-  return <>{children}</>;
+  return children;
 };
 
 export default ProtectedRoute;

frontend/src/services/actions/types.tsx

@@ -21,7 +21,8 @@ export const LOGOUT = "LOGOUT";
 export interface RootState {
   auth: {
     error: any;
-    isAuthenticated: boolean;
+    // Catch any code that doesn't handle the null case by matching the actual reducer state defined in auth.ts
+    isAuthenticated: boolean | null;
     isSuperuser: boolean;
   };
 }