From f440552ee9eed45051c1590aa51c8a8082ccc069 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com>
Date: Fri, 22 Nov 2024 15:07:16 -0300
Subject: [PATCH] fix: do not render page while examples are loading (#4768)

* Added check if examples load before loading all pages

* [autofix.ci] apply automated fixes

---------

Co-authored-by: Gabriel Luiz Freitas Almeida <gabriel@langflow.org>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 .../API/queries/flows/use-get-basic-examples.ts   |  1 +
 src/frontend/src/pages/AppInitPage/index.tsx      | 15 ++++++++++-----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/controllers/API/queries/flows/use-get-basic-examples.ts b/src/frontend/src/controllers/API/queries/flows/use-get-basic-examples.ts
index d6cc3dc55..45066c22f 100644
--- a/src/frontend/src/controllers/API/queries/flows/use-get-basic-examples.ts
+++ b/src/frontend/src/controllers/API/queries/flows/use-get-basic-examples.ts
@@ -26,6 +26,7 @@ export const useGetBasicExamplesQuery: useQueryFunctionType<
 
   const queryResult = query(["useGetBasicExamplesQuery"], responseFn, {
     ...options,
+    retry: 3,
   });
 
   return queryResult;
diff --git a/src/frontend/src/pages/AppInitPage/index.tsx b/src/frontend/src/pages/AppInitPage/index.tsx
index 2eb8b2976..be43fa5b9 100644
--- a/src/frontend/src/pages/AppInitPage/index.tsx
+++ b/src/frontend/src/pages/AppInitPage/index.tsx
@@ -26,10 +26,13 @@ export function AppInitPage() {
   useGetConfig({ enabled: isFetched });
   const { isFetched: typesLoaded } = useGetTypes({ enabled: isFetched });
   useGetGlobalVariables({ enabled: typesLoaded });
-  useGetBasicExamplesQuery({ enabled: typesLoaded });
   useGetTagsQuery({ enabled: typesLoaded });
-
-  useGetFoldersQuery({ enabled: typesLoaded });
+  useGetFoldersQuery({
+    enabled: typesLoaded,
+  });
+  const { isFetched: isExamplesFetched } = useGetBasicExamplesQuery({
+    enabled: typesLoaded,
+  });
 
   useEffect(() => {
     if (isFetched) {
@@ -49,11 +52,13 @@ export function AppInitPage() {
     //need parent component with width and height
     <>
       {isLoaded ? (
-        (isLoading || !isFetched || !typesLoaded) && <LoadingPage overlay />
+        (isLoading || !isFetched || !isExamplesFetched || !typesLoaded) && (
+          <LoadingPage overlay />
+        )
       ) : (
         <CustomLoadingPage />
       )}
-      {isFetched && typesLoaded && <Outlet />}
+      {isFetched && isExamplesFetched && typesLoaded && <Outlet />}
     </>
   );
 }