Loading state dusccefully added.

src/components/calender/DatePicker.tsx

@@ -28,7 +28,6 @@ import {
 import { format } from "date-fns";
 import findValidDateRange from "../../../lib/findValidDateRange";
 import FormValidateEmoji from "./FormValidateEmoji";
-import { useAppSelector } from "../../app/hooks";
 
 interface DatePickerProps {
   isLoading: boolean;
@@ -58,7 +57,7 @@ const DatePicker = ({ title, isLoading }: DatePickerProps): JSX.Element => {
         dateError = "Please select a date.";
         setValid(false);
       } else if (dateArr.length === 3) {
-        const date: UpdateCalendarProps = {
+        const date: UpdateCalenderPropsDateLayout = {
           year: parseInt(dateArr[0]),
           month: parseInt(dateArr[1]),
           day: parseInt(dateArr[2])
@@ -98,7 +97,7 @@ const DatePicker = ({ title, isLoading }: DatePickerProps): JSX.Element => {
       if (formInput.date) {
         if (!validateDate(formInput.date)) {
           const dateArr = formInput.date.split("-");
-          const date: UpdateCalendarProps = {
+          const date: UpdateCalenderPropsDateLayout = {
             year: parseInt(dateArr[0]),
             month: parseInt(dateArr[1]),
             day: parseInt(dateArr[2])

src/components/calender/index.tsx

@@ -6,7 +6,10 @@ import { updateCurrDate, updateMonth } from "../../features/calender/calender";
 import CalenderNav from "./CalenderNav";
 import Day from "./Day";
 
-const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
+const Calender = ({
+  date: newDate,
+  isLoading
+}: UpdateCalendarProps): JSX.Element => {
   // * Month * //
   const currDate: string = useAppSelector((state) => state.calender.currDate);
   const selectedDate: SelectedDateInfo = useAppSelector(
@@ -64,7 +67,7 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
 
   return (
     <VStack h="91vh" w="100%">
-      <CalenderNav title={title} isLoading={false} />
+      <CalenderNav title={title} isLoading={isLoading} />
       <VStack h="100%" w="100%" spacing={0}>
         <HStack
           px={6}
@@ -128,7 +131,7 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
 
               return (
                 <Day
-                  isLoading={false}
+                  isLoading={isLoading}
                   isOverflow={isOverflow}
                   overflowDirection={overflowDirection}
                   currSticker={sticker}