✨ add loading page if server not responding, ref from chenqingspring/…

…react-lottie#100

frontend/src/App.tsx

@@ -1,24 +1,37 @@
-/* eslint-disable require-jsdoc */
-import axios from 'axios'
-
 import Test from './components/Test'
 import DogWalking from './components/DogWalking'
+import {useState, useEffect, ReactElement} from 'react'
+import {pingDB} from './api/PingAPI'
+
+/**
+ * App
+ *
+ * @return {ReactElement}
+ */
+function App(): ReactElement {
+  /** Loading page */
+  const [loading, setLoading] = useState<boolean>(true)
+  useEffect(() => {
+    let intervalID: number
+    if (loading) {
+      intervalID = window.setInterval(() => pingDB(setLoading), 1000)
+    }
+    return () => {
+      // reset timer
+      window.clearInterval(intervalID)
+    }
+  }, [loading])
 
-function App() {
-  const {REACT_APP_API_URL} = process.env
-  const getData = async () => {
-    const res = await axios.get(`${REACT_APP_API_URL}/ping/api`)
-    const {data} = res
-    console.log(data)
-  }
-  getData()
   return (
     <div className="App">
-      <DogWalking />
-      <header className="App-header">
-        <Test />
-      </header>
-    </div >
+      {loading ? (
+        <DogWalking />
+      ) : (
+        <header className="App-header">
+          <Test />
+        </header>
+      )}
+    </div>
   )
 }