From 111dee8e7e9e8947a78f2fe8c68bd88f1376ebfe Mon Sep 17 00:00:00 2001
From: Stefan Forstenlechner <stefan@forstenlechner.dev>
Date: Tue, 20 Aug 2024 23:26:29 +0200
Subject: [PATCH] Reorder fetch requests/useEffect

directories need to be loaded first as it is a main element that never
 changes and is always displayed
folder previews are shown above images and should therefore be loaded
 before images
---
 .../src/ImageGalleryLayout.tsx                | 38 +++++++++----------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/picture-gallery-client/src/ImageGalleryLayout.tsx b/picture-gallery-client/src/ImageGalleryLayout.tsx
index b5f90b5..8d578ed 100644
--- a/picture-gallery-client/src/ImageGalleryLayout.tsx
+++ b/picture-gallery-client/src/ImageGalleryLayout.tsx
@@ -35,11 +35,30 @@ function ImageGalleryLayout() {
     setDrawerOpen(!drawerOpen);
   }
 
+  useEffect(() => {
+    fetch("/directories", {
+      headers: {
+        Accept: "application/json",
+      },
+    })
+      .then((res) => res.json())
+      .then((data) => setFolders(data));
+  }, []);
+
   useEffect(() => {
     setFoldersPreview(undefined);
     setImages([]);
     setError(false);
     setImagesLoaded(false);
+    fetch(`/folderspreview${location.pathname}`, {
+      headers: {
+        Accept: "application/json",
+      },
+    })
+      .then((res) => res.json())
+      .then((data) => {
+        setFoldersPreview(data);
+      });
     fetch(`/images${location.pathname}`, {
       headers: {
         Accept: "application/json",
@@ -58,27 +77,8 @@ function ImageGalleryLayout() {
           setImagesLoaded(true);
         }
       });
-    fetch(`/folderspreview${location.pathname}`, {
-      headers: {
-        Accept: "application/json",
-      },
-    })
-      .then((res) => res.json())
-      .then((data) => {
-        setFoldersPreview(data);
-      });
   }, [location.pathname]);
 
-  useEffect(() => {
-    fetch("/directories", {
-      headers: {
-        Accept: "application/json",
-      },
-    })
-      .then((res) => res.json())
-      .then((data) => setFolders(data));
-  }, []);
-
   if (error) {
     return (
       <p>