X2-9688 added loading state for Arrival picker dates (#349)

* added loading state for Arrival picker dates * fix error * resolve feedback * fix crush * fix lint * fix loading status * resolve feedback
xola · Oct 1, 2024 · fae0453 · fae0453
1 parent ff00cfe
commit fae0453
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 1 deletion.
diff --git a/src/components/DatePicker/DatePicker.jsx b/src/components/DatePicker/DatePicker.jsx
@@ -30,6 +30,7 @@ export const DatePicker = ({
     value,
     getDayContent,
     disabledDays = [],
+    loadingDays = [],
     shouldShowYearPicker = false,
     onChange,
     onMonthChange,
@@ -107,6 +108,18 @@ export const DatePicker = ({
         return disabledDays(date);
     };
 
+    const isLoading = (date) => {
+        if (isArray(loadingDays)) {
+            return loadingDays.some((_date) => isSame(now(_date, timezoneName), date, "day"));
+        }
+
+        if (isFunction(loadingDays)) {
+            return loadingDays(date);
+        }
+
+        return loadingDays(date);
+    };
+
     const handleRelativeRangeChanged = (rangeName, range) => {
         setCurrentMonth(range.from);
         setStartMonth(range.from);
@@ -204,11 +217,13 @@ export const DatePicker = ({
     const renderDay = (date) => {
         const tooltipContent = getTooltip?.(date);
         const disabled = isDisabled(date);
+        const loading = isLoading(date);
 
         return tooltipContent ? (
             <Tooltip placement="top" content={tooltipContent}>
                 <Day
                     disabled={disabled}
+                    isLoading={loading}
                     selectedDate={value}
                     date={date}
                     getContent={getDayContent}
@@ -218,6 +233,7 @@ export const DatePicker = ({
         ) : (
             <Day
                 disabled={disabled}
+                isLoading={loading}
                 selectedDate={value}
                 date={date}
                 getContent={getDayContent}

diff --git a/src/components/DatePicker/Day.jsx b/src/components/DatePicker/Day.jsx
@@ -2,13 +2,31 @@ import clsx from "clsx";
 import dayjs from "dayjs";
 import PropTypes from "prop-types";
 import React from "react";
+import { Dot } from "../Dot/Dot";
 
-export const Day = ({ selectedDate, date, getContent, currentMonth, disabled = false }) => {
+export const Day = ({ selectedDate, date, getContent, currentMonth, isLoading = false, disabled = false }) => {
     const isSameMonth = dayjs(currentMonth).isSame(date, "month");
+
     if (getContent && isSameMonth) {
+        if (isLoading) {
+            return (
+                <div className="mr-2 flex animate-pulse items-center justify-center">
+                    <Dot className="ui-day-content pointer-events-none !cursor-not-allowed" color="secondary" />
+                </div>
+            );
+        }
+
         return <DayContent selectedDate={selectedDate} date={date} getContent={getContent} />;
     }
 
+    if (isLoading) {
+        return (
+            <div className="mr-2 flex animate-pulse items-center justify-center">
+                <Dot className="pointer-events-none !cursor-not-allowed" color="secondary" size="xlarge" />
+            </div>
+        );
+    }
+
     const isSameDay = selectedDate && dayjs(selectedDate).isSame(date, "day");
 
     return (

diff --git a/src/components/Dot/Dot.jsx b/src/components/Dot/Dot.jsx
@@ -15,6 +15,7 @@ const sizes = {
     small: "h-1 w-1",
     medium: "h-1.5 w-1.5",
     large: "h-2 w-2",
+    xlarge: "h-8 w-8",
 };
 
 export const Dot = ({ color = "primary", size = "medium", className, ...rest }) => {