Add a loading prop & spinner to the DatePicker UI component in case d…

…ata is not yet loaded
wri · Oct 11, 2023 · a19a4df · a19a4df
1 parent 33d0112
commit a19a4df
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 26 deletions.
diff --git a/components/ui/datepicker/component.js b/components/ui/datepicker/component.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { Portal } from 'react-portal';
 import OutsideClickHandler from 'react-outside-click-handler';
 import moment from 'moment';
+import Spinner from 'components/spinner';
 
 import ReactDatePicker, {
   registerLocale,
@@ -23,7 +24,14 @@ registerLocale('zh', zh);
 registerLocale('pt_BR', ptBR);
 registerLocale('id', id);
 
-const Datepicker = ({ lang, selected, minDate, maxDate, ...props }) => {
+const Datepicker = ({
+  lang,
+  loading = false,
+  selected,
+  minDate,
+  maxDate,
+  ...props
+}) => {
   const [open, setOpen] = useState(false);
   const inputEl = useRef();
 
@@ -37,6 +45,17 @@ const Datepicker = ({ lang, selected, minDate, maxDate, ...props }) => {
     </button>
   ));
 
+  const LoadingInput = () => (
+    <button className="datepicker-input loading">
+      <Spinner
+        position="relative"
+        style={{
+          box: { width: 12, height: 12 },
+        }}
+      />
+    </button>
+  );
+
   const CalendarWrapper = ({ className, children }) => (
     <OutsideClickHandler onOutsideClick={() => setOpen(false)}>
       <CalendarContainer className={className}>{children}</CalendarContainer>
@@ -78,27 +97,31 @@ const Datepicker = ({ lang, selected, minDate, maxDate, ...props }) => {
 
   return (
     <div className="c-datepicker notranslate" ref={inputEl}>
-      <ReactDatePicker
-        open={open}
-        dateFormat="dd MMM yyyy"
-        onSelect={() => setOpen(false)}
-        customInput={<CustomInput />}
-        calendarClassName="datepicker-calendar"
-        renderCustomHeader={(headerProps) => (
-          <DatepickerHeader
-            {...headerProps}
-            minDate={minDateUTC}
-            maxDate={maxDateUTC}
-          />
-        )}
-        popperContainer={PortalContainer}
-        locale={lang || 'en'}
-        calendarContainer={CalendarWrapper}
-        {...props}
-        selected={selectedUTC}
-        minDate={minDateUTC}
-        maxDate={maxDateUTC}
-      />
+      {loading ? (
+        <LoadingInput />
+      ) : (
+        <ReactDatePicker
+          open={open}
+          dateFormat="dd MMM yyyy"
+          onSelect={() => setOpen(false)}
+          customInput={<CustomInput />}
+          calendarClassName="datepicker-calendar"
+          renderCustomHeader={(headerProps) => (
+            <DatepickerHeader
+              {...headerProps}
+              minDate={minDateUTC}
+              maxDate={maxDateUTC}
+            />
+          )}
+          popperContainer={PortalContainer}
+          locale={lang || 'en'}
+          calendarContainer={CalendarWrapper}
+          {...props}
+          selected={selectedUTC}
+          minDate={minDateUTC}
+          maxDate={maxDateUTC}
+        />
+      )}
     </div>
   );
 };
@@ -112,6 +135,7 @@ Datepicker.propTypes = {
   selected: PropTypes.object,
   minDate: PropTypes.object,
   maxDate: PropTypes.object,
+  loading: PropTypes.bool,
 };
 
 export default Datepicker;
diff --git a/components/ui/datepicker/datepicker-header/styles.scss b/components/ui/datepicker/datepicker-header/styles.scss
@@ -39,3 +39,12 @@
     }
   }
 }
+
+.c-datepicker {
+  .datepicker-input {
+    &.loading {
+      width: 86px;
+      height: 1.3rem;
+    }
+  }
+}
diff --git a/components/widget/components/widget-header/components/widget-settings/component.jsx b/components/widget/components/widget-header/components/widget-settings/component.jsx
@@ -116,18 +116,21 @@ class WidgetSettings extends PureComponent {
             />
           </div>
         );
-      case 'datepicker':
+      case 'datepicker': {
+        const loadingDatepicker = !startValue || !minDate || !maxDate;
+
         return (
-          <div className={cx('widget-settings-selector', type)}>
+          <div className={cx("widget-settings-selector", type)}>
             <div className="datepicker-selector">
               <div>
                 <span className="label">From</span>
                 <Datepicker
                   {...popperSettings}
+                  loading={loadingDatepicker}
                   selected={new Date(startValue)}
                   onChange={(change) =>
                     propagateChange({
-                      [startKey]: moment(change).format('YYYY-MM-DD'),
+                      [startKey]: moment(change).format("YYYY-MM-DD"),
                     })}
                   minDate={new Date(minDate)}
                   maxDate={new Date(maxDate)}
@@ -139,10 +142,11 @@ class WidgetSettings extends PureComponent {
                 <span className="label">To</span>
                 <Datepicker
                   {...popperSettings}
+                  loading={loadingDatepicker}
                   selected={new Date(endValue)}
                   onChange={(change) =>
                     propagateChange({
-                      [endKey]: moment(change).format('YYYY-MM-DD'),
+                      [endKey]: moment(change).format("YYYY-MM-DD"),
                     })}
                   minDate={new Date(minDate)}
                   maxDate={new Date(maxDate)}
@@ -153,6 +157,7 @@ class WidgetSettings extends PureComponent {
             </div>
           </div>
         );
+      }
       default:
         return (
           options &&