Updated loading screens

glycojones · Nov 1, 2023 · cc19976 · cc19976
1 parent 6d859ec
commit cc19976
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git a/webserver/src/App.jsx b/webserver/src/App.jsx
@@ -1,12 +1,13 @@
 import { useEffect, useState, Suspense } from 'react'
 import './App.css'
 import HomeSection from './pages/Home/HomeSection'
+import PageLoad from './components/Loading/PageLoad'
 
 function App() {
   const [resetApp, setResetApp] = useState(false)
 
   return (
-    <Suspense fallback={<div>Loading... </div>}>
+    <Suspense fallback={<PageLoad/>}>
 
     <div className='flex flex-col'>
       <HomeSection/>

diff --git a/webserver/src/components/Loading/PageLoad.jsx b/webserver/src/components/Loading/PageLoad.jsx
@@ -1,7 +1,15 @@
+import ClipLoader from "react-spinners/ClipLoader";
+
 export default function PageLoad() {
     return (
-        <div className="flex text-center w-full h-full bg-gray text-primary ">
-            <h1>Loading page</h1>
+        <div className="min-h-screen flex flex-col space-y-6 text-center w-screen h-screen bg-gray justify-center items-center text-primary text-m ">
+            {/* <h1>Loading Privateer Web App</h1> */}
+            <ClipLoader
+                loading={true}
+                size={100}
+                aria-label="Loading Spinner"
+                data-testid="loader"
+            />
         </div>
     )
 

diff --git a/webserver/src/layouts/Header.jsx b/webserver/src/layouts/Header.jsx
@@ -15,7 +15,7 @@ export function Header(props) {
             <NavBar setResetApp={props.setResetApp}/>
             <div className="flex justify-center mb-6">
                 {props.fallback != true ?
-                    <Suspense fallback={<Loading loadingText={"Loading"} />}>
+                    <Suspense fallback={<Loading loadingText={"Loading content..."} />}>
                         {props.submit == null ?
                             <Upload {...props} />
                                 : props.tableData == null ?