From cc19976e4840081dff9fb6394a45a008c252ca64 Mon Sep 17 00:00:00 2001
From: Dialpuri <dialpuri.jordan@gmail.com>
Date: Wed, 1 Nov 2023 17:34:18 +0000
Subject: [PATCH] Updated loading screens

---
 webserver/src/App.jsx                         |  3 ++-
 webserver/src/components/Loading/PageLoad.jsx | 12 ++++++++++--
 webserver/src/layouts/Header.jsx              |  2 +-
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/webserver/src/App.jsx b/webserver/src/App.jsx
index 58f6a067..e50186d8 100644
--- 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
index 90201b82..115d3a10 100644
--- 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
index 9c2486b8..2d19dc85 100644
--- 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 ?