feat: add loading spinner for re-query (#4921)

Author: TCL735

src/visualization/components/internal/ViewLoadingSpinner.tsx

@@ -8,6 +8,8 @@ import {RemoteDataState} from 'src/types'
 // Components
 import {TechnoSpinner, ComponentSize} from '@influxdata/clockface'
 
+const VISUALIZATION_LOADING_SPINNER_DIAMETER = 66
+
 interface Props {
   loading: RemoteDataState
 }
@@ -50,7 +52,10 @@ const ViewLoadingSpinner: FunctionComponent<Props> = ({loading}) => {
   if (loading === RemoteDataState.Loading) {
     return (
       <div className="view-loading-spinner">
-        <TechnoSpinner diameterPixels={66} strokeWidth={ComponentSize.Medium} />
+        <TechnoSpinner
+          diameterPixels={VISUALIZATION_LOADING_SPINNER_DIAMETER}
+          strokeWidth={ComponentSize.Medium}
+        />
         <div className={timerElementClass}>{`${Math.round(seconds * 10) /
           10}s`}</div>
       </div>

src/visualization/types/Graph/view.tsx

@@ -12,10 +12,12 @@ import {
   lineTransform,
   LineLayerConfig,
 } from '@influxdata/giraffe'
+import {RemoteDataState} from '@influxdata/clockface'
 import memoizeOne from 'memoize-one'
 
 // Components
 import EmptyGraphMessage from 'src/shared/components/EmptyGraphMessage'
+import ViewLoadingSpinner from 'src/visualization/components/internal/ViewLoadingSpinner'
 
 // Context
 import {AppSettingContext} from 'src/shared/contexts/app'
@@ -82,6 +84,9 @@ const XYPlot: FC<Props> = ({
   const [preZoomResult, setPreZoomResult] = useState<InternalFromFluxResult>(
     null
   )
+  const [requeryStatus, setRequeryStatus] = useState<RemoteDataState>(
+    RemoteDataState.NotStarted
+  )
 
   useEffect(() => {
     setResultState(result)
@@ -179,24 +184,26 @@ const XYPlot: FC<Props> = ({
   if (isFlagEnabled('zoomRequery')) {
     useXDomainSettings = ({storedDomain, parsedResult, timeRange}) =>
       useZoomRequeryXDomainSettings({
+        data: parsedResult.table.getColumn(xColumn, 'number'),
         parsedResult,
-        setResult: setResultState,
         preZoomResult,
-        setPreZoomResult,
         query: properties?.queries?.[0]?.text ?? '',
+        setPreZoomResult,
+        setRequeryStatus,
+        setResult: setResultState,
         storedDomain,
-        data: parsedResult.table.getColumn(xColumn, 'number'),
         timeRange,
       })
     useYDomainSettings = ({storedDomain, parsedResult}) =>
       useZoomRequeryYDomainSettings({
+        data: memoizedYColumnData,
         parsedResult,
-        setResult: setResultState,
         preZoomResult,
-        setPreZoomResult,
         query: properties?.queries?.[0]?.text ?? '',
+        setPreZoomResult,
+        setRequeryStatus,
+        setResult: setResultState,
         storedDomain,
-        data: memoizedYColumnData,
       })
   }
 
@@ -327,7 +334,14 @@ const XYPlot: FC<Props> = ({
     dispatch
   )
 
-  return <Plot config={config} />
+  return (
+    <>
+      {isFlagEnabled('zoomRequery') && (
+        <ViewLoadingSpinner loading={requeryStatus} />
+      )}
+      <Plot config={config} />
+    </>
+  )
 }
 
 export default XYPlot

src/visualization/utils/useVisDomainSettings.ts

@@ -23,6 +23,7 @@ import {
 
 // Types
 import {AppState, InternalFromFluxResult, TimeRange} from 'src/types'
+import {RemoteDataState} from '@influxdata/clockface'
 /*
   This hook helps map the domain setting stored for line graph to the
   appropriate settings on a @influxdata/giraffe `Config` object.
@@ -137,13 +138,14 @@ export const useVisYDomainSettings = (
 }
 
 interface ZoomRequeryArgs {
+  data: NumericColumnData | string[]
   parsedResult: InternalFromFluxResult
-  setResult: Function
   preZoomResult: InternalFromFluxResult
-  setPreZoomResult: Function
   query: string
+  setPreZoomResult: Function
+  setRequeryStatus: Function
+  setResult: Function
   storedDomain: number[]
-  data: NumericColumnData | string[]
   timeRange?: TimeRange
 }
 
@@ -152,13 +154,14 @@ const isNotEqual = (firstValue: any, secondValue: any): boolean =>
 
 export const useZoomRequeryXDomainSettings = (args: ZoomRequeryArgs) => {
   const {
+    data,
     parsedResult,
-    setResult,
     preZoomResult,
-    setPreZoomResult,
     query,
+    setPreZoomResult,
+    setRequeryStatus,
+    setResult,
     storedDomain,
-    data,
     timeRange = null,
   } = args
 
@@ -204,11 +207,16 @@ export const useZoomRequeryXDomainSettings = (args: ZoomRequeryArgs) => {
           variables,
           zoomQueryWindowVariable
         )
+
+        setRequeryStatus(RemoteDataState.Loading)
         runQuery(orgId, query, extern).promise.then(
           (result: RunQueryResult) => {
             if (result.type === 'SUCCESS') {
+              setRequeryStatus(RemoteDataState.Done)
               const parsed = fromFlux(result.csv)
               setResult(parsed)
+            } else {
+              setRequeryStatus(RemoteDataState.Error)
             }
           }
         )
@@ -217,6 +225,7 @@ export const useZoomRequeryXDomainSettings = (args: ZoomRequeryArgs) => {
   }, [domain]) // eslint-disable-line react-hooks/exhaustive-deps
 
   const setZoomDomain = (updatedDomain: number[]) => {
+    setRequeryStatus(RemoteDataState.NotStarted)
     if (!preZoomResult) {
       setPreZoomResult(parsedResult)
     }
@@ -225,6 +234,7 @@ export const useZoomRequeryXDomainSettings = (args: ZoomRequeryArgs) => {
   }
 
   const resetDomain = () => {
+    setRequeryStatus(RemoteDataState.NotStarted)
     if (preZoomResult) {
       setResult(preZoomResult)
       setPreZoomResult(null)
@@ -238,13 +248,14 @@ export const useZoomRequeryXDomainSettings = (args: ZoomRequeryArgs) => {
 
 export const useZoomRequeryYDomainSettings = (args: ZoomRequeryArgs) => {
   const {
+    data,
     parsedResult,
-    setResult,
     preZoomResult,
-    setPreZoomResult,
     query,
+    setPreZoomResult,
+    setRequeryStatus,
+    setResult,
     storedDomain,
-    data,
     timeRange = null,
   } = args
 
@@ -295,11 +306,16 @@ export const useZoomRequeryYDomainSettings = (args: ZoomRequeryArgs) => {
           variables,
           zoomQueryWindowVariable
         )
+
+        setRequeryStatus(RemoteDataState.Loading)
         runQuery(orgId, query, extern).promise.then(
           (result: RunQueryResult) => {
             if (result.type === 'SUCCESS') {
+              setRequeryStatus(RemoteDataState.Done)
               const parsed = fromFlux(result.csv)
               setResult(parsed)
+            } else {
+              setRequeryStatus(RemoteDataState.Error)
             }
           }
         )
@@ -308,6 +324,7 @@ export const useZoomRequeryYDomainSettings = (args: ZoomRequeryArgs) => {
   }, [domain]) // eslint-disable-line react-hooks/exhaustive-deps
 
   const setZoomDomain = (updatedDomain: number[]) => {
+    setRequeryStatus(RemoteDataState.NotStarted)
     if (!preZoomResult) {
       setPreZoomResult(parsedResult)
     }
@@ -316,6 +333,7 @@ export const useZoomRequeryYDomainSettings = (args: ZoomRequeryArgs) => {
   }
 
   const resetDomain = () => {
+    setRequeryStatus(RemoteDataState.NotStarted)
     if (preZoomResult) {
       setResult(preZoomResult)
       setPreZoomResult(null)