Fix consolidate loading spinner

ui/src/shared/components/LineGraph.tsx

@@ -7,6 +7,7 @@ import _ from 'lodash'
 // Components
 import SingleStat from 'src/shared/components/SingleStat'
 import {ErrorHandlingWith} from 'src/shared/decorators/errors'
+import InvalidData from 'src/shared/components/InvalidData'
 
 // Utils
 import {
@@ -14,8 +15,6 @@ import {
   TimeSeriesToDyGraphReturnType,
 } from 'src/utils/timeSeriesTransformers'
 
-import InvalidData from 'src/shared/components/InvalidData'
-
 // Types
 import {ColorString} from 'src/types/colors'
 import {DecimalPlaces} from 'src/types/dashboards'
@@ -29,16 +28,6 @@ import {
   CellType,
 } from 'src/types'
 
-const validateTimeSeries = ts => {
-  return _.every(ts, r =>
-    _.every(
-      r,
-      (v, i: number) =>
-        (i === 0 && Date.parse(v)) || _.isNumber(v) || _.isNull(v)
-    )
-  )
-}
-
 interface Props {
   axes: Axes
   type: CellType
@@ -77,9 +66,8 @@ class LineGraph extends PureComponent<LineGraphProps> {
     const {location} = this.props
 
     this.timeSeries = timeSeriesToDygraph(data, location.pathname)
-    this.isValidData = validateTimeSeries(
-      _.get(this.timeSeries, 'timeSeries', [])
-    )
+    const timeSeries = _.get(this.timeSeries, 'timeSeries', [])
+    this.isValidData = this.validateTimeSeries(timeSeries)
   }
 
   public componentWillUpdate(nextProps) {
@@ -168,6 +156,16 @@ class LineGraph extends PureComponent<LineGraphProps> {
     )
   }
 
+  private validateTimeSeries = ts => {
+    return _.every(ts, r =>
+      _.every(
+        r,
+        (v, i: number) =>
+          (i === 0 && Date.parse(v)) || _.isNumber(v) || _.isNull(v)
+      )
+    )
+  }
+
   private get isGraphFilled(): boolean {
     const {type} = this.props
 

ui/src/shared/components/time_series/TimeSeries.tsx

@@ -29,6 +29,7 @@ interface Props {
 
 interface State {
   loading: RemoteDataState
+  isFirstFetch: boolean
   timeSeries: TimeSeriesServerResponse[]
 }
 
@@ -42,11 +43,13 @@ class TimeSeries extends Component<Props, State> {
     this.state = {
       timeSeries: DEFAULT_TIME_SERIES,
       loading: RemoteDataState.NotStarted,
+      isFirstFetch: false,
     }
   }
 
   public async componentDidMount() {
-    this.executeQueries()
+    const isFirstFetch = true
+    this.executeQueries(isFirstFetch)
     AutoRefresh.subscribe(this.executeQueries)
   }
 
@@ -62,7 +65,7 @@ class TimeSeries extends Component<Props, State> {
     this.executeQueries()
   }
 
-  public executeQueries = async () => {
+  public executeQueries = async (isFirstFetch: boolean = false) => {
     const {source, inView, queries, templates} = this.props
 
     if (!inView) {
@@ -73,7 +76,7 @@ class TimeSeries extends Component<Props, State> {
       return this.setState({timeSeries: DEFAULT_TIME_SERIES})
     }
 
-    this.setState({loading: RemoteDataState.Loading})
+    this.setState({loading: RemoteDataState.Loading, isFirstFetch})
 
     const TEMP_RES = 300
 
@@ -99,7 +102,7 @@ class TimeSeries extends Component<Props, State> {
   }
 
   public render() {
-    const {timeSeries, loading} = this.state
+    const {timeSeries, loading, isFirstFetch} = this.state
 
     const hasValues = _.some(timeSeries, s => {
       const results = _.get(s, 'response.results', [])
@@ -107,6 +110,14 @@ class TimeSeries extends Component<Props, State> {
       return v
     })
 
+    if (isFirstFetch && loading === RemoteDataState.Loading) {
+      return (
+        <div className="graph-empty">
+          <h3 className="graph-spinner" />
+        </div>
+      )
+    }
+
     if (!hasValues) {
       return (
         <div className="graph-empty">