Added spinning wheel when /all is loading (#757)

Added spinning wheel when all components are still loading.

src/frontend/src/App.tsx

@@ -9,6 +9,7 @@ import ErrorAlert from "./alerts/error";
 import NoticeAlert from "./alerts/notice";
 import SuccessAlert from "./alerts/success";
 import CrashErrorComponent from "./components/CrashErrorComponent";
+import LoadingComponent from "./components/loadingComponent";
 import { alertContext } from "./contexts/alertContext";
 import { locationContext } from "./contexts/locationContext";
 import { TabsContext } from "./contexts/tabsContext";
@@ -24,6 +25,7 @@ export default function App() {
     setIsStackedOpen(true);
   }, [location.pathname, setCurrent, setIsStackedOpen, setShowSideBar]);
   const { hardReset } = useContext(TabsContext);
+
   const {
     errorData,
     errorOpen,
@@ -34,6 +36,7 @@ export default function App() {
     successData,
     successOpen,
     setSuccessOpen,
+    loading,
   } = useContext(alertContext);
 
   // Initialize state variable for the list of alerts
@@ -132,7 +135,15 @@ export default function App() {
         }}
         FallbackComponent={CrashErrorComponent}
       >
-        <Router />
+        {loading ? (
+          <div className="loading-page-panel">
+            <LoadingComponent remSize={50} />
+          </div>
+        ) : (
+          <>
+            <Router />
+          </>
+        )}
       </ErrorBoundary>
       <div></div>
       <div className="app-div" style={{ zIndex: 999 }}>

src/frontend/src/contexts/alertContext.tsx

@@ -23,12 +23,16 @@ type alertContextType = {
   pushNotificationList: (Object: AlertItemType) => void;
   clearNotificationList: () => void;
   removeFromNotificationList: (index: string) => void;
+  loading: boolean;
+  setLoading: (newState: boolean) => void;
 };
 
 //initial values to alertContextType
 const initialValue: alertContextType = {
   errorData: { title: "", list: [] },
   setErrorData: () => {},
+  loading: true,
+  setLoading: () => {},
   errorOpen: false,
   setErrorOpen: () => {},
   noticeData: { title: "", link: "" },
@@ -55,6 +59,7 @@ export function AlertProvider({ children }: { children: ReactNode }) {
     list?: Array<string>;
   }>({ title: "", list: [] });
   const [errorOpen, setErrorOpen] = useState(false);
+  const [loading, setLoading] = useState(true);
   const [noticeData, setNoticeDataState] = useState<{
     title: string;
     link?: string;
@@ -141,6 +146,8 @@ export function AlertProvider({ children }: { children: ReactNode }) {
         removeFromNotificationList,
         clearNotificationList,
         notificationList,
+        loading,
+        setLoading,
         pushNotificationList,
         setNotificationCenter,
         notificationCenter,

src/frontend/src/contexts/index.tsx

@@ -16,17 +16,17 @@ export default function ContextWrapper({ children }: { children: ReactNode }) {
       <TooltipProvider>
         <ReactFlowProvider>
           <DarkProvider>
-            <TypesProvider>
-              <LocationProvider>
-                <AlertProvider>
+            <AlertProvider>
+              <TypesProvider>
+                <LocationProvider>
                   <SSEProvider>
                     <TabsProvider>
                       <UndoRedoProvider>{children}</UndoRedoProvider>
                     </TabsProvider>
                   </SSEProvider>
-                </AlertProvider>
-              </LocationProvider>
-            </TypesProvider>
+                </LocationProvider>
+              </TypesProvider>
+            </AlertProvider>
           </DarkProvider>
         </ReactFlowProvider>
       </TooltipProvider>

src/frontend/src/contexts/typesContext.tsx

@@ -1,8 +1,15 @@
-import { createContext, ReactNode, useEffect, useState } from "react";
+import {
+  createContext,
+  ReactNode,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
 import { Node } from "reactflow";
 import { getAll } from "../controllers/API";
 import { APIKindType } from "../types/api";
 import { typesContextType } from "../types/typesContext";
+import { alertContext } from "./alertContext";
 
 //context to share types adn functions from nodes to flow
 
@@ -25,6 +32,7 @@ export function TypesProvider({ children }: { children: ReactNode }) {
   const [reactFlowInstance, setReactFlowInstance] = useState(null);
   const [templates, setTemplates] = useState({});
   const [data, setData] = useState({});
+  const { setLoading } = useContext(alertContext);
 
   useEffect(() => {
     let delay = 1000; // Start delay of 1 second
@@ -40,6 +48,7 @@ export function TypesProvider({ children }: { children: ReactNode }) {
         const result = await getAll();
         // Make sure to only update the state if the component is still mounted.
         if (isMounted) {
+          setLoading(false);
           setData(result.data);
           setTemplates(
             Object.keys(result.data).reduce((acc, curr) => {

src/frontend/src/style/applies.css

@@ -192,6 +192,10 @@
     @apply flex w-full;
   }
 
+  .loading-page-panel {
+    @apply h-full w-full flex justify-center items-center bg-muted;
+  }
+
   .main-page-panel {
     @apply flex-max-width h-full flex-col overflow-auto bg-muted px-16;
   }