From fae045336cc7004d88c248a8f0aec4dfabe98587 Mon Sep 17 00:00:00 2001
From: SemenStruchev <125129104+SemenStruchev@users.noreply.github.com>
Date: Tue, 1 Oct 2024 13:58:17 +0300
Subject: [PATCH] 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
---
 src/components/DatePicker/DatePicker.jsx | 16 ++++++++++++++++
 src/components/DatePicker/Day.jsx        | 20 +++++++++++++++++++-
 src/components/Dot/Dot.jsx               |  1 +
 3 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/src/components/DatePicker/DatePicker.jsx b/src/components/DatePicker/DatePicker.jsx
index 4e3efc6c0..51d28754f 100644
--- 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
index ed814ba7d..9da3b5889 100644
--- 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
index a09c07294..16ebafd89 100644
--- 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 }) => {