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>

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;

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 />}
     </>
   );
 }