Loading state dusccefully added.

src/pages/index.tsx

@@ -6,9 +6,14 @@ import Tutorial from "../components/tutorial";
 import LoadingOverlay from "../components/loading/LoadingOverlay";
 import { Provider } from "react-redux";
 import { store } from "../app/store";
+import { useAppDispatch, useAppSelector } from "../app/hooks";
+import { updateLoading } from "../features/calender/calender";
 
 const IndexPage = (): JSX.Element => {
-  const calenderProps = useRef<UpdateCalendarProps>({
+  const isLoading = useAppSelector((state) => state.calender.isLoading);
+  const dispatch = useAppDispatch();
+
+  const currDate = useRef<UpdateCalenderPropsDateLayout>({
     year: parseInt(format(new Date(), "y")),
     month: parseInt(format(new Date(), "M")),
     day: parseInt(format(new Date(), "d"))
@@ -19,42 +24,20 @@ const IndexPage = (): JSX.Element => {
   );
 
   const getTutorialCookie = (): boolean => {
-    let flag = false;
-
-    const decodedCookie = decodeURIComponent(document.cookie);
-    const cookies = decodedCookie.split(";");
-
-    cookies.map((val) => {
-      const cookie = val.split("=");
-
-      if (cookie.length > 1) {
-        const cName = cookie[0].toLowerCase();
-        const cVal = JSON.parse(cookie[1]) || cookie[1];
-
-        if (
-          cName === "tutorialCompleted".toLowerCase() &&
-          cName &&
-          cVal &&
-          typeof cVal === "boolean"
-        ) {
-          flag = cVal;
-        }
-      }
-    });
-    return flag;
+    return JSON.parse(localStorage.getItem("tutorialCompleted")) || false;
   };
 
   const setTutorialCookie = (bool: boolean): void => {
-    const name = "tutorialCompleted";
-    const exp = addMonths(new Date(), 1).toUTCString();
-
-    document.cookie = `${name}=${bool};expires=${exp}'path=/`;
-    setCompletedTutorial(bool);
+    localStorage.setItem("tutorialCompleted", `${bool}`);
+    setCompletedTutorial(true);
   };
 
   useEffect(() => {
+    if (completedTutorial !== null) {
+      dispatch(updateLoading(false));
+    }
     setCompletedTutorial(getTutorialCookie());
-  }, [completedTutorial]);
+  }, [completedTutorial, dispatch]);
 
   return (
     <Box
@@ -69,10 +52,10 @@ const IndexPage = (): JSX.Element => {
         {completedTutorial === null ? (
           <Fragment>
             <LoadingOverlay />
-            <Calender {...calenderProps.current} />
+            <Calender date={currDate.current} isLoading={isLoading} />
           </Fragment>
         ) : completedTutorial ? (
-          <Calender {...calenderProps.current} />
+          <Calender date={currDate.current} isLoading={isLoading} />
         ) : (
           <Tutorial setTutorialCookie={setTutorialCookie} />
         )}