PROD Deploy 2023-11-09 12pm EST

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;

components/ui/datepicker/datepicker-header/styles.scss

@@ -39,3 +39,12 @@
     }
   }
 }
+
+.c-datepicker {
+  .datepicker-input {
+    &.loading {
+      width: 86px;
+      height: 1.3rem;
+    }
+  }
+}

components/widget/component.jsx

@@ -174,6 +174,7 @@ class Widget extends PureComponent {
           <>
             <WidgetHeader
               widget={widget}
+              loading={loading}
               title={title}
               large={large}
               datasets={datasets}

components/widget/components/widget-header/components/widget-settings-button/component.jsx

@@ -54,7 +54,6 @@ class WidgetSettingsButton extends PureComponent {
       proxyOn,
       embed,
       active,
-      shouldSettingsOpen,
       toggleSettingsMenu,
     } = this.props;
     const { tooltipOpen } = this.state;
@@ -105,7 +104,6 @@ class WidgetSettingsButton extends PureComponent {
             proxyOn={proxyOn}
             handleChangeSettings={handleChangeSettings}
             handleShowInfo={handleShowInfo}
-            showYears={shouldSettingsOpen}
           />
         )}
       >

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 &&

package.json

@@ -94,7 +94,7 @@
     "@next/bundle-analyzer": "^10.0.1",
     "@reduxjs/toolkit": "^1.4.0",
     "@wordpress/api-fetch": "^3.19.1",
-    "@worldresources/gfw-components": "^3.4.0",
+    "@worldresources/gfw-components": "^3.4.1",
     "aws-sdk": "^2.291.0",
     "axios": "^0.21.1",
     "chroma-js": "^2.1.0",

yarn.lock

@@ -3945,10 +3945,10 @@
     lodash "^4.17.19"
     react-native-url-polyfill "^1.1.2"
 
-"@worldresources/gfw-components@^3.4.0":
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/@worldresources/gfw-components/-/gfw-components-3.4.0.tgz#06ff95f00fa4b52f2fcf15739c5ddba8c52780f2"
-  integrity sha512-w9s2eYA/cVjXhKdaKr3hlkiWKkaZFSd5XAbIqUv8fZlIRp3cbNgRTYaSXene+NhScYc2NjBKye2hF5MveUU1JQ==
+"@worldresources/gfw-components@^3.4.1":
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/@worldresources/gfw-components/-/gfw-components-3.4.1.tgz#30c223c54748720ab8cb19c07afc189a3444b613"
+  integrity sha512-oGzQ7D2fLOkmpBgsFN9dqE26SBjEsIKLGNdUmGVAY//dJUealkLi6BSddljYji4srVh4s4XBr10/DLbBIf/0sQ==
   dependencies:
     "@artsy/fresnel" "^1.1.0"
     "@tippyjs/react" "^4.0.2"