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

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>