Merge pull request #104 from dragoni7/loading-screen

Loading screen
dragoni7 · Sep 20, 2024 · 45e1c02 · 45e1c02
2 parents d65cf5c + 0b33dc2
commit 45e1c02
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 7 deletions.
diff --git a/src/app/routes/Dashboard.tsx b/src/app/routes/Dashboard.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useMemo } from 'react';
-import { styled } from '@mui/system';
+import { Box, styled } from '@mui/system';
 import { useDispatch, useSelector } from 'react-redux';
 import { AppDispatch, RootState } from '../../store';
 import { generatePermutations } from '../../features/armor-optimization/generate-permutations';
@@ -46,7 +46,7 @@ import {
   updateSelectedCharacter,
   updateSelectedExoticItemHash,
 } from '../../store/DashboardReducer';
-import { Grid } from '@mui/material';
+import { CircularProgress, Grid, Typography } from '@mui/material';
 import { ManifestArmorStatMod, ManifestExoticArmor } from '../../types/manifest-types';
 import { SharedLoadoutDto } from '../../features/loadouts/types';
 import { updateProfileCharacters } from '../../store/ProfileReducer';
@@ -62,6 +62,18 @@ const DashboardContent = styled(Grid)(({ theme }) => ({
   backgroundPosition: 'center',
 }));
 
+const LoadingScreen = styled(Grid)(({ theme }) => ({
+  height: '100vh',
+  width: '100vw',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  backgroundImage: `url(${background})`,
+  backgroundSize: 'cover',
+  backgroundPosition: 'center',
+}));
+
 export const Dashboard: React.FC = () => {
   const dispatch = useDispatch<AppDispatch>();
 
@@ -492,14 +504,18 @@ export const Dashboard: React.FC = () => {
               </Grid>
               <Grid item md={4} sx={{ marginTop: '1%' }}>
                 {generatingPermutations ? (
-                  <p>Loading...</p>
+                  <Box display="flex" justifyContent="center" alignItems="center">
+                    <CircularProgress size={24} />
+                  </Box>
                 ) : filteredPermutations ? (
                   <PermutationsList
                     permutations={filteredPermutations}
                     onPermutationClick={openLoadoutCustomization}
                   />
                 ) : (
-                  <p>Loading....</p>
+                  <Box display="flex" justifyContent="center" alignItems="center">
+                    <CircularProgress size={24} />
+                  </Box>
                 )}
               </Grid>
               <Footer
@@ -509,7 +525,12 @@ export const Dashboard: React.FC = () => {
           </Grid>
         </>
       ) : (
-        <div>loading...</div>
+        <LoadingScreen container>
+          <CircularProgress size={60} thickness={4} />
+          <Typography variant="h5" sx={{ mt: 2, color: 'white' }}>
+            Loading Dashboard...
+          </Typography>
+        </LoadingScreen>
       )}
     </>
   );

diff --git a/src/app/routes/Landing.tsx b/src/app/routes/Landing.tsx
@@ -3,12 +3,25 @@ import { useNavigate } from 'react-router';
 import BungieLogin from '../../features/auth/components/BungieLogin';
 import { regenerateTokens } from '../../lib/bungie_api/token-services';
 import { isAuthenticated } from '../../lib/bungie_api/authorization';
-import { Container, Grid, Paper, Box, Typography } from '@mui/material';
+import { Container, Grid, Paper, Box, Typography, styled, CircularProgress } from '@mui/material';
 import pyramidBackground from '/assets/pyramid.jpg';
 import FeatureSlider from '../../components/FeatureSlider';
 import { useScramble } from 'use-scramble';
 import { handleVersionUpdate } from '../../util/version-check';
 
+const LoadingScreen = styled(Box)(({ theme }) => ({
+  height: '100vh',
+  width: '100vw',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  backgroundImage: `url(${pyramidBackground})`,
+  backgroundSize: 'cover',
+  backgroundPosition: 'center',
+  backgroundRepeat: 'no-repeat',
+}));
+
 export const LandingRoute: React.FC = () => {
   const navigate = useNavigate();
   const [hidden, setHidden] = useState(true);
@@ -49,7 +62,14 @@ export const LandingRoute: React.FC = () => {
   }, [hidden, replay]);
 
   if (hidden) {
-    return <div>Loading...</div>;
+    return (
+      <LoadingScreen>
+        <CircularProgress size={60} thickness={4} />
+        <Typography variant="h5" sx={{ mt: 2, color: 'white' }}>
+          Loading D2Loadouts...
+        </Typography>
+      </LoadingScreen>
+    );
   }
 
   return (