Fix: Bring back loading to avoid white page error (#1434)

src/frontend/src/App.tsx

@@ -34,6 +34,7 @@ export default function App() {
   const setSuccessOpen = useAlertStore((state) => state.setSuccessOpen);
   const loading = useAlertStore((state) => state.loading);
   const [fetchError, setFetchError] = useState(false);
+  const isLoading = useFlowsManagerStore((state) => state.isLoading);
 
   // Initialize state variable for the list of alerts
   const [alertsList, setAlertsList] = useState<
@@ -170,7 +171,7 @@ export default function App() {
             description={FETCH_ERROR_DESCRIPION}
             message={FETCH_ERROR_MESSAGE}
           ></FetchErrorComponent>
-        ) : loading ? (
+        ) : isLoading ? (
           <div className="loading-page-panel">
             <LoadingComponent remSize={50} />
           </div>

src/frontend/src/pages/MainPage/components/components/index.tsx

@@ -94,12 +94,6 @@ export default function ComponentsComponent({
     setPageSize(10);
   }
 
-  useEffect(() => {
-    setTimeout(() => {
-      setLoadingScreen(false);
-    }, 600);
-  }, []);
-
   return (
     <CardsWrapComponent
       onFileDrop={onFileDrop}
@@ -107,7 +101,7 @@ export default function ComponentsComponent({
     >
       <div className="flex h-full w-full flex-col justify-between">
         <div className="flex w-full flex-col gap-4">
-          {!loadingScreen && data.length === 0 ? (
+          {!isLoading && data.length === 0 ? (
             <div className="mt-6 flex w-full items-center justify-center text-center">
               <div className="flex-max-width h-full flex-col">
                 <div className="flex w-full flex-col gap-4">
@@ -136,7 +130,7 @@ export default function ComponentsComponent({
             </div>
           ) : (
             <div className="grid w-full gap-4 md:grid-cols-2 lg:grid-cols-2">
-              {loadingScreen === false && data?.length > 0 ? (
+              {isLoading === false && data?.length > 0 ? (
                 data?.map((item, idx) => (
                   <CollectionCardComponent
                     onDelete={() => {
@@ -185,7 +179,7 @@ export default function ComponentsComponent({
             </div>
           )}
         </div>
-        {!loadingScreen && data.length > 0 && (
+        {!isLoading && data.length > 0 && (
           <div className="relative py-6">
             <PaginatorComponent
               storeComponent={true}

src/frontend/src/stores/flowsManagerStore.ts

@@ -62,10 +62,10 @@ const useFlowsManagerStore = create<FlowsManagerStoreType>((set, get) => ({
           if (dbData) {
             const { data, flows } = processFlows(dbData, false);
             get().setFlows(flows);
-            set({ isLoading: false });
             useTypesStore.setState((state) => ({
               data: { ...state.data, ["saved_components"]: data },
             }));
+            set({ isLoading: false });
             resolve();
           }
         })

src/frontend/src/stores/typesStore.ts

@@ -4,6 +4,7 @@ import { APIDataType } from "../types/api";
 import { TypesStoreType } from "../types/zustand/types";
 import { templatesGenerator, typesGenerator } from "../utils/reactflowUtils";
 import useAlertStore from "./alertStore";
+import useFlowsManagerStore from "./flowsManagerStore";
 
 export const useTypesStore = create<TypesStoreType>((set, get) => ({
   types: {},
@@ -11,6 +12,8 @@ export const useTypesStore = create<TypesStoreType>((set, get) => ({
   data: {},
   getTypes: () => {
     return new Promise<void>(async (resolve, reject) => {
+      const setLoading = useFlowsManagerStore.getState().setIsLoading;
+      setLoading(true);
       getAll()
         .then((response) => {
           const data = response.data;
@@ -20,6 +23,7 @@ export const useTypesStore = create<TypesStoreType>((set, get) => ({
             data: { ...old.data, ...data },
             templates: templatesGenerator(data),
           }));
+          setLoading(false)
           resolve();
         })
         .catch((error) => {