Load variables before rendering Data Explorer

ui/src/dataExplorer/components/DataExplorer.tsx

@@ -4,6 +4,7 @@ import {connect} from 'react-redux'
 
 // Components
 import TimeMachine from 'src/timeMachine/components/TimeMachine'
+import GetVariables from 'src/shared/components/GetVariables'
 
 // Actions
 import {setActiveTimeMachine} from 'src/timeMachine/actions'
@@ -32,7 +33,9 @@ class DataExplorer extends PureComponent<DispatchProps, {}> {
     return (
       <div className="data-explorer">
         <HoverTimeProvider>
-          <TimeMachine />
+          <GetVariables>
+            <TimeMachine />
+          </GetVariables>
         </HoverTimeProvider>
       </div>
     )

ui/src/shared/components/GetVariables.tsx

@@ -0,0 +1,57 @@
+// Libraries
+import React, {useEffect, FunctionComponent} from 'react'
+import {connect} from 'react-redux'
+
+// Components
+import {SpinnerContainer, TechnoSpinner} from '@influxdata/clockface'
+
+// Actions
+import {getVariables} from 'src/variables/actions'
+
+// Types
+import {RemoteDataState} from 'src/types'
+import {AppState} from 'src/types/v2'
+
+interface StateProps {
+  variablesStatus: RemoteDataState
+}
+
+interface DispatchProps {
+  onGetVariables: typeof getVariables
+}
+
+type Props = StateProps & DispatchProps
+
+const GetVariables: FunctionComponent<Props> = ({
+  variablesStatus,
+  onGetVariables,
+  children,
+}) => {
+  useEffect(() => {
+    if (variablesStatus === RemoteDataState.NotStarted) {
+      onGetVariables()
+    }
+  }, [variablesStatus])
+
+  return (
+    <SpinnerContainer
+      loading={variablesStatus}
+      spinnerComponent={<TechnoSpinner />}
+    >
+      <>{children}</>
+    </SpinnerContainer>
+  )
+}
+
+const mstp = (state: AppState) => {
+  return {variablesStatus: state.variables.status}
+}
+
+const mdtp = {
+  onGetVariables: getVariables,
+}
+
+export default connect<StateProps, DispatchProps>(
+  mstp,
+  mdtp
+)(GetVariables)

ui/src/timeMachine/components/variableToolbar/VariableToolbar.tsx

@@ -1,70 +1,43 @@
 // Libraries
-import React, {useState, useEffect, FunctionComponent} from 'react'
+import React, {useState, FunctionComponent} from 'react'
 import {connect} from 'react-redux'
 
 // Components
 import SearchBar from 'src/timeMachine/components/SearchBar'
 import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
 import VariableItem from 'src/timeMachine/components/variableToolbar/VariableItem'
-import {SpinnerContainer, TechnoSpinner} from '@influxdata/clockface'
 
 // Utils
 import {getVariablesForOrg} from 'src/variables/selectors'
 import {getActiveOrg} from 'src/organizations/selectors'
 
-// Actions
-import {getVariables} from 'src/variables/actions'
-
 // Styles
 import 'src/timeMachine/components/variableToolbar/VariableToolbar.scss'
 
 // Types
 import {Variable} from '@influxdata/influx'
-import {RemoteDataState} from 'src/types'
 import {AppState} from 'src/types/v2'
 
 interface StateProps {
   variables: Variable[]
-  variablesStatus: RemoteDataState
 }
 
-interface DispatchProps {
-  onGetVariables: typeof getVariables
-}
-
-type Props = StateProps & DispatchProps
-
-const VariableToolbar: FunctionComponent<Props> = ({
-  variables,
-  variablesStatus,
-  onGetVariables,
-}) => {
+const VariableToolbar: FunctionComponent<StateProps> = ({variables}) => {
   const [searchTerm, setSearchTerm] = useState('')
 
-  useEffect(() => {
-    if (variablesStatus === RemoteDataState.NotStarted) {
-      onGetVariables()
-    }
-  }, [])
-
   return (
-    <SpinnerContainer
-      loading={variablesStatus}
-      spinnerComponent={<TechnoSpinner />}
-    >
-      <div className="variable-toolbar">
-        <SearchBar onSearch={setSearchTerm} resourceName={'Variables'} />
-        <FancyScrollbar>
-          <div className="variables-toolbar--list">
-            {variables
-              .filter(v => v.name.includes(searchTerm))
-              .map(v => (
-                <VariableItem variable={v} key={v.id} />
-              ))}
-          </div>
-        </FancyScrollbar>
-      </div>
-    </SpinnerContainer>
+    <div className="variable-toolbar">
+      <SearchBar onSearch={setSearchTerm} resourceName={'Variables'} />
+      <FancyScrollbar>
+        <div className="variables-toolbar--list">
+          {variables
+            .filter(v => v.name.includes(searchTerm))
+            .map(v => (
+              <VariableItem variable={v} key={v.id} />
+            ))}
+        </div>
+      </FancyScrollbar>
+    </div>
   )
 }
 
@@ -76,11 +49,4 @@ const mstp = (state: AppState) => {
   return {variables, variablesStatus}
 }
 
-const mdtp = {
-  onGetVariables: getVariables,
-}
-
-export default connect<StateProps, DispatchProps>(
-  mstp,
-  mdtp
-)(VariableToolbar)
+export default connect<StateProps>(mstp)(VariableToolbar)