Feat/update login flow reload page (#467)

* update spacing event modal

* update spacing create calendar modal

* fix evenchip description color

* using variant instead of sx

* update login flow

* fix: add useEffect import back to Calendar.tsx

src/features/User/HandleLogin.tsx

@@ -1,26 +1,26 @@
 import { useAppDispatch, useAppSelector } from "@/app/hooks";
-import { Loading } from "@/components/Loading/Loading";
 import { redirectTo } from "@/utils/apiUtils";
 import { useEffect, useRef } from "react";
 import { push } from "redux-first-history";
 import { getCalendarsListAsync } from "../Calendars/services";
 import { Auth } from "./oidcAuth";
 import { getOpenPaasUserDataAsync, setTokens, setUserData } from "./userSlice";
+import { setAppLoading } from "@/app/loadingSlice";
 
 export function HandleLogin() {
   const userData = useAppSelector((state) => state.user);
   const calendars = useAppSelector((state) => state.calendars);
   const dispatch = useAppDispatch();
   const hasInitiatedRef = useRef(false);
-  const calendarsLoadingRef = useRef(false);
+  const hasNavigatedRef = useRef(false);
 
+  // Initiate login or load saved data
   useEffect(() => {
     if (hasInitiatedRef.current) return;
-    if (userData.userData) return;
-    if (Object.keys(calendars.list).length > 0) return;
-    if (calendarsLoadingRef.current) return;
+    if (userData.userData && !calendars.pending) return;
 
     hasInitiatedRef.current = true;
+
     const initiateLogin = async () => {
       const savedToken = sessionStorage.getItem("tokenSet")
         ? JSON.parse(sessionStorage.getItem("tokenSet")!)
@@ -30,13 +30,11 @@ export function HandleLogin() {
         : null;
 
       if (savedToken && savedUser) {
+        dispatch(setAppLoading(true));
         dispatch(setTokens(savedToken));
         dispatch(setUserData(savedUser));
         await dispatch(getOpenPaasUserDataAsync());
-        calendarsLoadingRef.current = true;
         await dispatch(getCalendarsListAsync());
-        calendarsLoadingRef.current = false;
-        dispatch(push("/calendar"));
         return;
       }
 
@@ -55,26 +53,34 @@ export function HandleLogin() {
 
     initiateLogin();
   }, [userData.userData, calendars.list, dispatch]);
+
+  // Navigate to /calendar only when all data is ready
   useEffect(() => {
-    if (userData.error) {
+    if (hasNavigatedRef.current) return;
+    if (userData.loading || calendars.pending) return;
+    if (userData.error || calendars.error) {
+      dispatch(setAppLoading(false));
       dispatch(push("/error"));
+      return;
     }
-    if (
-      !calendars.pending &&
-      !userData.loading &&
-      !userData.error &&
-      !calendars.error
-    ) {
-      dispatch(push("/calendar"));
-    }
+    if (!userData.userData || !userData.tokens) return;
+    // Calendars list can be empty, that's valid - just need to finish loading
+
+    // All data is ready, navigate to calendar
+    hasNavigatedRef.current = true;
+    dispatch(setAppLoading(false));
+    dispatch(push("/calendar"));
   }, [
-    calendars.pending,
     userData.loading,
+    userData.userData,
+    userData.tokens,
     userData.error,
+    calendars.pending,
     calendars.error,
     dispatch,
   ]);
-  return <Loading />;
+
+  return null;
 }
 
 export default HandleLogin;