fix(native-filters): improve time range filter performance (#15295)

* fix time range default value

* defer time filter rendering to inView event

* avoid double fetching of time ranges

* lint

* move set to resolved promise

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterValue.tsx

@@ -65,7 +65,9 @@ const FilterValue: React.FC<FilterProps> = ({
   const cascadingFilters = useCascadingFilters(id, dataMaskSelected);
   const [state, setState] = useState<ChartDataResponseResult[]>([]);
   const [error, setError] = useState<string>('');
-  const [formData, setFormData] = useState<Partial<QueryFormData>>({});
+  const [formData, setFormData] = useState<Partial<QueryFormData>>({
+    inView: false,
+  });
   const [ownState, setOwnState] = useState<JsonObject>({});
   const [inViewFirstTime, setInViewFirstTime] = useState(inView);
   const inputRef = useRef<HTMLInputElement>(null);

superset-frontend/src/dashboard/components/nativeFilters/utils.ts

@@ -83,6 +83,7 @@ export const getFormData = ({
     time_range,
     time_range_endpoints: ['inclusive', 'exclusive'],
     url_params: extractUrlParams('regular'),
+    inView: true,
     viz_type: filterType,
     inputRef,
   };

superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx

@@ -187,6 +187,7 @@ export default function DateFilterLabel(props: DateFilterControlProps) {
   const [show, setShow] = useState<boolean>(false);
   const guessedFrame = useMemo(() => guessFrame(value), [value]);
   const [frame, setFrame] = useState<FrameType>(guessedFrame);
+  const [lastFetchedTimeRange, setLastFetchedTimeRange] = useState(value);
   const [timeRangeValue, setTimeRangeValue] = useState(value);
   const [validTimeRange, setValidTimeRange] = useState<boolean>(false);
   const [evalResponse, setEvalResponse] = useState<string>(value);
@@ -223,20 +224,26 @@ export default function DateFilterLabel(props: DateFilterControlProps) {
         }
         setValidTimeRange(true);
       }
+      setLastFetchedTimeRange(value);
     });
   }, [value]);
 
   useDebouncedEffect(
     () => {
-      fetchTimeRange(timeRangeValue, endpoints).then(({ value, error }) => {
-        if (error) {
-          setEvalResponse(error || '');
-          setValidTimeRange(false);
-        } else {
-          setEvalResponse(value || '');
-          setValidTimeRange(true);
-        }
-      });
+      if (lastFetchedTimeRange !== timeRangeValue) {
+        fetchTimeRange(timeRangeValue, endpoints).then(
+          ({ value: actualRange, error }) => {
+            if (error) {
+              setEvalResponse(error || '');
+              setValidTimeRange(false);
+            } else {
+              setEvalResponse(actualRange || '');
+              setValidTimeRange(true);
+            }
+            setLastFetchedTimeRange(timeRangeValue);
+          },
+        );
+      }
     },
     SLOW_DEBOUNCE,
     [timeRangeValue],

superset-frontend/src/filters/components/Time/TimeFilterPlugin.tsx

@@ -19,9 +19,9 @@
 import { styled } from '@superset-ui/core';
 import React, { useEffect } from 'react';
 import DateFilterControl from 'src/explore/components/controls/DateFilterControl';
+import { NO_TIME_RANGE } from 'src/explore/constants';
 import { PluginFilterTimeProps } from './types';
 import { Styles } from '../common';
-import { NO_TIME_RANGE } from '../../../explore/constants';
 
 const TimeFilterStyles = styled(Styles)`
   overflow-x: auto;
@@ -79,7 +79,7 @@ export default function TimeFilterPlugin(props: PluginFilterTimeProps) {
     handleTimeRangeChange(filterState.value);
   }, [filterState.value]);
 
-  return (
+  return props.formData?.inView ? (
     // @ts-ignore
     <TimeFilterStyles width={width} height={height}>
       <ControlContainer
@@ -92,11 +92,11 @@ export default function TimeFilterPlugin(props: PluginFilterTimeProps) {
         onMouseLeave={unsetFocusedFilter}
       >
         <DateFilterControl
-          value={filterState.value}
+          value={filterState.value || NO_TIME_RANGE}
           name="time_range"
           onChange={handleTimeRangeChange}
         />
       </ControlContainer>
     </TimeFilterStyles>
-  );
+  ) : null;
 }