Add spinner while loading data

adoptium · Sep 19, 2023 · 7f4fa42 · 7f4fa42
1 parent c6af359
commit 7f4fa42
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/src/Graph/Download.js b/src/Graph/Download.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Divider } from 'antd'
+import { Divider, Spin } from 'antd'
 import { api } from '../api'
 import { formatNum } from '../utils'
 import BarChart from './BarChart.js'
@@ -40,7 +40,13 @@ export default class DownloadTotal extends Component {
 
   render () {
     const { data, totalPieChartData } = this.state
-    if (!data) return null
+
+    if (!data) return (
+      <Spin tip="Loading" size="large">
+        <div className="content" />
+      </Spin>
+    )
+
     const total = formatNum(data.total_downloads.total)
 
     return (

diff --git a/src/Graph/Trends.js b/src/Graph/Trends.js
@@ -4,7 +4,7 @@ import { get } from '../utils'
 import LineChart from './LineChart'
 import BarChart from './BarChart'
 import moment from 'moment'
-import { Radio, Slider, Checkbox } from 'antd'
+import { Radio, Slider, Checkbox, Spin } from 'antd'
 import './Trends.css'
 
 const TypeFilter = ({ defaultValue, onChange, options }) => (
@@ -237,7 +237,11 @@ export default class Trends extends Component {
   render () {
     const state = this.state
 
-    if (!state.series || !state.series2 || !state.monthlyData) return null
+    if (!state.series || !state.series2 || !state.monthlyData) return (
+      <Spin tip="Loading" size="large">
+        <div className="content" />
+      </Spin>
+    )
 
     return (
       <>