Loading state basics in dialog

nemeseri · Oct 26, 2024 · efb4f21 · efb4f21
1 parent e75c336
commit efb4f21
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 7 deletions.
diff --git 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
@@ -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>
   );
 }
diff --git 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]);
     }
   }