Add loading page for initial app load

packages/mrwhale-dashboard/src/App.tsx

@@ -1,6 +1,12 @@
-import { CssBaseline, GlobalStyles, ThemeProvider } from "@mui/material";
+import {
+  Box,
+  CircularProgress,
+  CssBaseline,
+  GlobalStyles,
+  ThemeProvider,
+} from "@mui/material";
 import { useEffect } from "react";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 
 import Commands from "./features/commands/Commands";
@@ -10,16 +16,26 @@ import { useGetCurrentUserMutation } from "./features/users/usersApi";
 import Home from "./features/home/Home";
 import Dashboard from "./features/dashboard/Dashboard";
 import PrivateRoute from "./shared/PrivateRoute";
+import ManageGuild from "./features/dashboard/ManageGuild";
+import { selectIsInitialLoad } from "./features/auth/authSlice";
+import Loading from "./components/Loading";
 
 function App() {
   const dispatch = useDispatch();
+  const isInitialLoad = useSelector(selectIsInitialLoad);
   const [getCurrentUser] = useGetCurrentUserMutation();
 
   // Here we are fetching the logged in user.
   useEffect(() => {
     getCurrentUser();
   }, [dispatch, getCurrentUser]);
 
+  if (isInitialLoad) {
+    return (
+      <Loading />
+    );
+  }
+
   return (
     <>
       <ThemeProvider theme={defaultTheme}>
@@ -35,6 +51,7 @@ function App() {
               <Route path="/commands" element={<Commands />} />
               <Route path="/dashboard" element={<PrivateRoute />}>
                 <Route path="/dashboard" element={<Dashboard />} />
+                <Route path="/dashboard/manage" element={<ManageGuild />} />
               </Route>
             </Route>
           </Routes>

packages/mrwhale-dashboard/src/components/Loading.css

@@ -0,0 +1,22 @@
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.loader {
+  border: 16px solid #eeeeee;
+  border-top: 16px solid #00c3ff;
+  border-radius: 50%;
+  width: 60px;
+  height: 60px;
+  animation: spin 2s linear infinite;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-top: -50px;
+  margin-left: -50px;
+}

packages/mrwhale-dashboard/src/components/Loading.tsx

@@ -0,0 +1,11 @@
+import "./Loading.css";
+
+const Loading = () => {
+  return (
+    <div>
+      <div className="loader" />
+    </div>
+  );
+};
+
+export default Loading;