Add loading screen

5 files changed, 120 insertions, 4 deletions

diff --git a/package.json b/package.json
index db1ecb3..a1aa409 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
     "@babel/core": "^7.18.2",
     "@babel/plugin-syntax-flow": "^7.17.12",
     "@babel/plugin-transform-react-jsx": "^7.17.12",
+    "@react-spring/web": "^9.5.2",
     "@stitches/react": "^1.2.8",
     "@testing-library/dom": "^8.13.0",
     "@testing-library/jest-dom": "^5.16.4",
@@ -17,6 +18,7 @@
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-jwt": "^1.1.6",
+    "react-loading-icons": "^1.1.0",
     "react-modal": "^3.15.1",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 141affd..c2310d8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -4,6 +4,7 @@ specifiers:
   '@babel/core': ^7.18.2
   '@babel/plugin-syntax-flow': ^7.17.12
   '@babel/plugin-transform-react-jsx': ^7.17.12
+  '@react-spring/web': ^9.5.2
   '@stitches/react': ^1.2.8
   '@testing-library/dom': ^8.13.0
   '@testing-library/jest-dom': ^5.16.4
@@ -17,6 +18,7 @@ specifiers:
   react: ^18.1.0
   react-dom: ^18.1.0
   react-jwt: ^1.1.6
+  react-loading-icons: ^1.1.0
   react-modal: ^3.15.1
   react-router-dom: ^6.3.0
   react-scripts: 5.0.1
@@ -27,6 +29,7 @@ dependencies:
   '@babel/core': 7.18.2
   '@babel/plugin-syntax-flow': 7.17.12_@babel+core@7.18.2
   '@babel/plugin-transform-react-jsx': 7.17.12_@babel+core@7.18.2
+  '@react-spring/web': 9.5.2_ef5jwxihqo6n7gxfmzogljlgcm
   '@stitches/react': 1.2.8_react@18.1.0
   '@testing-library/dom': 8.13.0
   '@testing-library/jest-dom': 5.16.4
@@ -38,6 +41,7 @@ dependencies:
   react: 18.1.0
   react-dom: 18.1.0_react@18.1.0
   react-jwt: 1.1.6_react@18.1.0
+  react-loading-icons: 1.1.0
   react-modal: 3.15.1_ef5jwxihqo6n7gxfmzogljlgcm
   react-router-dom: 6.3.0_ef5jwxihqo6n7gxfmzogljlgcm
   react-scripts: 5.0.1_kyabxajlhps7o43dn7edo3gzxi
@@ -1993,6 +1997,60 @@ packages:
       webpack-dev-server: 4.9.0_webpack@5.72.1
     dev: false
 
+  /@react-spring/animated/9.5.2_react@18.1.0:
+    resolution: {integrity: sha512-oRlX+MmYLbK8IuUZR7SQUnRjXxJ4PMIZeBkBd1SUWVgVJAHMTfJzPltzm+I6p59qX+qLlklYHfnWaonQKDqLuQ==}
+    peerDependencies:
+      react: ^16.8.0  || >=17.0.0 || >=18.0.0
+    dependencies:
+      '@react-spring/shared': 9.5.2_react@18.1.0
+      '@react-spring/types': 9.5.2
+      react: 18.1.0
+    dev: false
+
+  /@react-spring/core/9.5.2_react@18.1.0:
+    resolution: {integrity: sha512-UMRtFH6EfebMp/NMDGCUY5+hZFXsg9iT9hzt/iPzJSz2WMXKBjLoFZHJXcmiVOrIhzHmg1O0pFECn1Wp6pZ5Gw==}
+    peerDependencies:
+      react: ^16.8.0  || >=17.0.0 || >=18.0.0
+    dependencies:
+      '@react-spring/animated': 9.5.2_react@18.1.0
+      '@react-spring/rafz': 9.5.2
+      '@react-spring/shared': 9.5.2_react@18.1.0
+      '@react-spring/types': 9.5.2
+      react: 18.1.0
+    dev: false
+
+  /@react-spring/rafz/9.5.2:
+    resolution: {integrity: sha512-xHSRXKKBI/wDUkZGrspkOm4VlgN6lZi8Tw9Jzibp9QKf3neoof+U2mDNgklvnLaasymtUwAq9o4ZfFvQIVNgPQ==}
+    dev: false
+
+  /@react-spring/shared/9.5.2_react@18.1.0:
+    resolution: {integrity: sha512-/OSf2sjwY4BUnjZL6xMC+H3WxOOhMUCk+yZwgdj40XuyUpk6E6tYyiPeD9Yq5GLsZHodkvE1syVMRVReL4ndAg==}
+    peerDependencies:
+      react: ^16.8.0  || >=17.0.0 || >=18.0.0
+    dependencies:
+      '@react-spring/rafz': 9.5.2
+      '@react-spring/types': 9.5.2
+      react: 18.1.0
+    dev: false
+
+  /@react-spring/types/9.5.2:
+    resolution: {integrity: sha512-n/wBRSHPqTmEd4BFWY6TeR1o/UY+3ujoqMxLjqy90CcY/ozJzDRuREL3c+pxMeTF2+B7dX33dTPCtFMX51nbxg==}
+    dev: false
+
+  /@react-spring/web/9.5.2_ef5jwxihqo6n7gxfmzogljlgcm:
+    resolution: {integrity: sha512-cusTjbOGTgtbsnpBDjb6Ia+B0lQLE0Fk5rGDog6Sww7hWnLIQ521PMiOBnAWtkntB9eXDUfj7L91nwJviEC0lw==}
+    peerDependencies:
+      react: ^16.8.0  || >=17.0.0 || >=18.0.0
+      react-dom: ^16.8.0  || >=17.0.0 || >=18.0.0
+    dependencies:
+      '@react-spring/animated': 9.5.2_react@18.1.0
+      '@react-spring/core': 9.5.2_react@18.1.0
+      '@react-spring/shared': 9.5.2_react@18.1.0
+      '@react-spring/types': 9.5.2
+      react: 18.1.0
+      react-dom: 18.1.0_react@18.1.0
+    dev: false
+
   /@rollup/plugin-babel/5.3.1_qhxjqw33rawdn3amxsgyn5mkfy:
     resolution: {integrity: sha512-WFfdLWU/xVWKeRQnKmIAQULUI7Il0gZnBIH/ZFO069wYIfPu+8zrfp/KMW0atmELoRDq8FbiP3VCss9MhCut7Q==}
     engines: {node: '>= 10.0.0'}
@@ -8121,6 +8179,11 @@ packages:
     resolution: {integrity: sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==}
     dev: false
 
+  /react-loading-icons/1.1.0:
+    resolution: {integrity: sha512-Y9eZ6HAufmUd8DIQd6rFrx5Bt/oDlTM9Nsjvf8YpajTa3dI8cLNU8jUN5z7KTANU+Yd6/KJuBjxVlrU2dMw33g==}
+    engines: {node: '>= 12.0.0'}
+    dev: false
+
   /react-modal/3.15.1_ef5jwxihqo6n7gxfmzogljlgcm:
     resolution: {integrity: sha512-duB9bxOaYg7Zt6TMFldIFxQRtSP+Dg3F1ZX3FXxSUn+3tZZ/9JCgeAQKDg7rhZSAqopq8TFRw3yIbnx77gyFTw==}
     engines: {node: '>=8'}
diff --git a/src/App.js b/src/App.js
index 62e8506..b5cb61b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,12 +1,16 @@
 import './App.css'
 import { useAuth } from './hooks/useAuth'
+import { useFeatures } from './hooks/useFeatures'
 import Home from './routes/Home'
 import Login from './routes/Login'
 import Records from './routes/Records'
 import SignUp from './routes/SignUp.js'
 import Zones from './routes/Zones'
 import Button from './uikit/Button'
+import { animated, easings, useSpring } from '@react-spring/web'
 import { styled } from '@stitches/react'
+import { useEffect, useState } from 'react'
+import { Oval } from 'react-loading-icons'
 import { BrowserRouter, Route, Routes } from 'react-router-dom'
 import { Link, useNavigate } from 'react-router-dom'
 
@@ -74,9 +78,11 @@ function ButtonRow() {
 }
 function App() {
   let auth = useAuth()
+  let features = useFeatures()
 
   return (
     <div className="App">
+      <LoadingScreen paused={features == null} />
       <MessageBar>
         <MessageBox>
           This software is in public alpha. Please don't use it for anything
@@ -104,4 +110,50 @@ function App() {
   )
 }
 
+function LoadingScreen({ paused }) {
+  let [display, setDisplay] = useState(true)
+  const spring = useSpring({
+    to: { opacity: 0 },
+    from: { opacity: 1 },
+    delay: 100,
+    reset: true,
+    pause: paused,
+    onRest: () => setDisplay(false),
+    config: { duration: 250 },
+  })
+
+  const style = {
+    zIndex: '9999',
+    position: 'absolute',
+    backgroundColor: '#ffffff',
+    width: '100vw',
+    height: '100vh',
+    justifyContent: 'center',
+    alignItems: 'center',
+  }
+
+  return (
+    <animated.div
+      style={{ display: display ? 'flex' : 'none', ...style, ...spring }}
+    >
+      <div>
+        <div style={{ display: 'block' }}>
+          <div>
+            <Oval style={{ transform: 'scale(2)' }} stroke="#3b82f6" />
+          </div>
+          <div
+            style={{
+              padding: '1em 0px 0px 1em',
+              fontSize: '2em',
+              color: '#6969dd',
+            }}
+          >
+            Loading...
+          </div>
+        </div>
+      </div>
+    </animated.div>
+  )
+}
+
 export default App
diff --git a/src/hooks/useFeatures.js b/src/hooks/useFeatures.js
index f37e974..af5e7f5 100644
--- a/src/hooks/useFeatures.js
+++ b/src/hooks/useFeatures.js
@@ -1,10 +1,9 @@
-import React from 'react'
-import { useEffect } from 'react'
+import React, { useEffect } from 'react'
 
 const FeaturesContext = React.createContext()
 
 export function FeaturesProvider({ children }) {
-  const [features, setFeatures] = React.useState([])
+  const [features, setFeatures] = React.useState(null)
 
   useEffect(() => {
     fetch('/api/v1/features')
diff --git a/src/routes/SignUp.js b/src/routes/SignUp.js
index 469f76d..6cce214 100644
--- a/src/routes/SignUp.js
+++ b/src/routes/SignUp.js
@@ -134,7 +134,7 @@ export function SignUp() {
     })
   }
 
-  if (!features.signup) {
+  if (!features || !features.signup) {
     return (
       <Flex>
         <LoginCard>