src/components/calender/index.tsx

@@ -43,7 +43,7 @@ const Calender = ({
         console.warn("Invalid date format: ", newDate);
       }
     }
-  }, [dispatch, newDate]);
+  }, [currentSelectedDateStr, dispatch, newDate]);
 
   useEffect(() => {
     // console.info("Check to update date.");

src/components/tutorial/CalenderExample.tsx

@@ -7,18 +7,23 @@ import Day from "../calender/Day";
 
 interface CalenderExampleProps {
   type: "add" | "edit";
+  isLoading: boolean;
 }
 
-const CalenderExample = ({ type }: CalenderExampleProps): JSX.Element => {
+const CalenderExample = ({
+  type,
+  isLoading
+}: CalenderExampleProps): JSX.Element => {
   // TODO: Check if the current date is the start of the user's preferred start of the week and use the previous week for the edit example.
 
   // TODO: Add highlight to the current date for the add example and highlight other dates when the edit example is used.
 
   // TODO: Disable the days that shouldn't have a function to prevent edits on add example and add to current date on the edit example.
 
-  const currDateStr: string = useAppSelector(state => state.calender.currDate);
+  const currDateStr: string = useAppSelector(
+    (state) => state.calender.currDate
+  );
   const currDateObj: Date = new Date(currDateStr);
-  const isLoading = false;
 
   const dispatch = useAppDispatch();
 

src/components/tutorial/index.tsx

@@ -1,3 +1,6 @@
+import React from "react";
+import { useAppDispatch, useAppSelector } from "../../app/hooks";
+import { toggleRememberCompleted } from "../../features/tutorial";
 import {
   Box,
   Button,
@@ -8,9 +11,6 @@ import {
   Text,
   VStack
 } from "@chakra-ui/react";
-import React from "react";
-import { useAppDispatch, useAppSelector } from "../../app/hooks";
-import { toggleRememberCompleted } from "../../features/tutorial";
 import CustomButton from "../buttons/Custom";
 import Patreon from "../buttons/Patreon";
 import Twitter from "../buttons/Twitter";
@@ -19,11 +19,13 @@ import CalenderExample from "./CalenderExample";
 interface TutorialProps {
   setTutorialComplete: () => void;
   setTempTutorialComplete: () => void;
+  isLoading: boolean;
 }
 
 const Tutorial = ({
   setTutorialComplete,
-  setTempTutorialComplete
+  setTempTutorialComplete,
+  isLoading
 }: TutorialProps): JSX.Element => {
   const rememberComplete = useAppSelector(
     (state) => state.tutorial.rememberCompleted
@@ -271,7 +273,12 @@ const Tutorial = ({
           alignItems="flex-start"
           pt={8}
         >
-          <Button type="button" onClick={() => handleSkip()} variant="skip">
+          <Button
+            type="button"
+            isDisabled={isLoading}
+            onClick={() => handleSkip()}
+            variant="skip"
+          >
             {"Skip"}
           </Button>
           <VStack
@@ -283,6 +290,7 @@ const Tutorial = ({
           >
             <Button
               type="button"
+              isDisabled={isLoading}
               onClick={() => handleComplete()}
               variant="primary"
             >
@@ -290,6 +298,7 @@ const Tutorial = ({
             </Button>
             <Checkbox
               isChecked={rememberComplete}
+              isDisabled={isLoading}
               onChange={() => handleUpdateCheck()}
             >
               {"Remember completed?"}

src/pages/index.tsx

@@ -39,9 +39,8 @@ const IndexPage = (): JSX.Element => {
   };
 
   useEffect(() => {
-    if (completedTutorial === null || tutorialCompletionInfo === null) {
+    if (completedTutorial === null && tutorialCompletionInfo === null) {
       dispatch(getAndSetTutorial());
-      dispatch(updateLoading(false));
     }
 
     if (completedTutorial !== null) {
@@ -63,6 +62,7 @@ const IndexPage = (): JSX.Element => {
           <Tutorial
             setTutorialComplete={handleTutorialCompleted}
             setTempTutorialComplete={handleTempTutorialCompleted}
+            isLoading={isLoading}
           />
         )}
       </Provider>