From efb4f21f5ea15a1ef283c389d2c7d56c6da2e6ae Mon Sep 17 00:00:00 2001
From: Andras Nemeseri <andras@nemeseri.comm>
Date: Sat, 26 Oct 2024 08:32:14 -0700
Subject: [PATCH] Loading state basics in dialog

---
 src/assets/street-photography.css | 18 ++++++++++++++++++
 src/components/GalleryDialog.tsx  | 20 +++++++++++++++++---
 src/routes/street-photography.tsx | 21 +++++++++++++++++----
 3 files changed, 52 insertions(+), 7 deletions(-)

diff --git a/src/assets/street-photography.css b/src/assets/street-photography.css
index 84f9ba3..d31fe2f 100644
--- a/src/assets/street-photography.css
+++ b/src/assets/street-photography.css
@@ -34,6 +34,20 @@
   max-height: none;
 }
 
+.street-photography dialog .img-skeleton {
+  display: none;
+  aspect-ratio: 3/4;
+  width: auto;
+  height: 100%;
+  background: #eee;
+  margin: 0 auto;
+  opacity: 0.4;
+}
+
+.street-photography dialog.loading .img-skeleton {
+  display: block;
+}
+
 .street-photography dialog[open] {
   display: flex;
   align-items: center;
@@ -80,6 +94,10 @@
   width: auto;
 }
 
+.street-photography dialog.loading img {
+  display: none;
+}
+
 @media only screen and (max-width: 767px) {
   .gallery {
     flex-wrap: wrap;
diff --git a/src/components/GalleryDialog.tsx b/src/components/GalleryDialog.tsx
index 8d9945b..b6d08f7 100644
--- a/src/components/GalleryDialog.tsx
+++ b/src/components/GalleryDialog.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useState, useRef } from "react";
 
 type GalleryDialogProps = {
   photo: FlickrImgInSet | null;
@@ -7,6 +7,7 @@ type GalleryDialogProps = {
 }
 
 export default function GalleryDialog({ photo, handleClose, handleKeys }: GalleryDialogProps) {
+  const [isLoading, setIsLoading] = useState(false);
   const dialogRef = useRef<HTMLDialogElement>(null);
   const isOpen = !!photo;
 
@@ -17,10 +18,23 @@ export default function GalleryDialog({ photo, handleClose, handleKeys }: Galler
       dialogRef.current?.close();
     }
   }, [isOpen]);
+
+  useEffect(() => {
+    setIsLoading(true);
+  }, [photo]);
+
   return (
-    <dialog onClick={handleClose} onKeyDown={handleKeys} ref={dialogRef}>
+    <dialog onClick={handleClose} onKeyDown={handleKeys} ref={dialogRef} className={isLoading ? 'loading' : ''}>
       <button>Close</button>
-      {photo && <img src={photo.largeUrl} alt={photo.title} title={photo.title} onClick={(e) => {e.stopPropagation()}}/>}
+      <div className='img-skeleton'></div>
+      {photo && 
+        <img src={photo.largeUrl} 
+          key={photo.id} 
+          alt={photo.title} 
+          title={photo.title} 
+          onClick={(e) => e.stopPropagation()}
+          onLoad={() => setIsLoading(false)}
+      />}
     </dialog>
   );
 }
\ No newline at end of file
diff --git a/src/routes/street-photography.tsx b/src/routes/street-photography.tsx
index 4a11208..cabd351 100644
--- a/src/routes/street-photography.tsx
+++ b/src/routes/street-photography.tsx
@@ -40,15 +40,28 @@ function StreetPhotography() {
 
   function handleKeys(e: React.KeyboardEvent<HTMLDialogElement>) {
     e.preventDefault();
-    const currentIdx = activePhoto ? photos.indexOf(activePhoto) : null;
 
     if (e.key === 'Escape') {
       setActivePhoto(null);
-    } else if (e.key === 'ArrowRight' && currentIdx !== null) {
+    } else if (e.key === 'ArrowRight') {
+      showNextPhoto();
+    } else if (e.key === 'ArrowLeft') {
+      showPrevPhoto();
+    }
+  }
+
+  function showNextPhoto() {
+    const currentIdx = activePhoto ? photos.indexOf(activePhoto) : null;
+    if (currentIdx !== null) {
       const targetIdx = currentIdx === photos.length - 1 ? 0 : currentIdx+1;
       setActivePhoto(photos[targetIdx]);
-    } else if (e.key === 'ArrowLeft' && currentIdx !== null) {
-      const targetIdx = currentIdx === 0 ? photos.length-1 : currentIdx-1;
+    }
+  }
+
+  function showPrevPhoto() {
+    const currentIdx = activePhoto ? photos.indexOf(activePhoto) : null;
+    if (currentIdx !== null) {
+      const targetIdx = currentIdx === photos.length - 1 ? 0 : currentIdx+1;
       setActivePhoto(photos[targetIdx]);
     }
   }