From bdce4cd2bc7af092c51abc4b617fe5a88bde84ef Mon Sep 17 00:00:00 2001
From: Andras Nemeseri <andras@nemeseri.comm>
Date: Sat, 26 Oct 2024 09:13:19 -0700
Subject: [PATCH] Loading animation and some extra logic

---
 src/assets/street-photography.css | 19 ++++++++++++-------
 src/components/GalleryDialog.tsx  | 26 +++++++++++++++++++++++---
 2 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/src/assets/street-photography.css b/src/assets/street-photography.css
index d31fe2f..00ab6c6 100644
--- a/src/assets/street-photography.css
+++ b/src/assets/street-photography.css
@@ -34,17 +34,22 @@
   max-height: none;
 }
 
-.street-photography dialog .img-skeleton {
+.street-photography .loading .loader {
   display: none;
-  aspect-ratio: 3/4;
-  width: auto;
-  height: 100%;
-  background: #eee;
+  width: 20px;
   margin: 0 auto;
-  opacity: 0.4;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  animation: l5 1s infinite linear alternate;
+}
+@keyframes l5 {
+    0%  {box-shadow: 25px 0 #fff, -25px 0 #fff2;background: #fff }
+    33% {box-shadow: 25px 0 #fff, -25px 0 #fff2;background: #fff2}
+    66% {box-shadow: 25px 0 #fff2,-25px 0 #fff; background: #fff2}
+    100%{box-shadow: 25px 0 #fff2,-25px 0 #fff; background: #fff }
 }
 
-.street-photography dialog.loading .img-skeleton {
+.street-photography .loading .loader {
   display: block;
 }
 
diff --git a/src/components/GalleryDialog.tsx b/src/components/GalleryDialog.tsx
index b6d08f7..4caaea3 100644
--- a/src/components/GalleryDialog.tsx
+++ b/src/components/GalleryDialog.tsx
@@ -7,8 +7,9 @@ type GalleryDialogProps = {
 }
 
 export default function GalleryDialog({ photo, handleClose, handleKeys }: GalleryDialogProps) {
-  const [isLoading, setIsLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
   const dialogRef = useRef<HTMLDialogElement>(null);
+  const timeoutRef = useRef<number | undefined>();
   const isOpen = !!photo;
 
   useEffect(() =>{
@@ -19,14 +20,33 @@ export default function GalleryDialog({ photo, handleClose, handleKeys }: Galler
     }
   }, [isOpen]);
 
+  useEffect(() => {
+    // delay the loader animation to prevent flicker on fast img loads
+    if (isLoading) {
+      timeoutRef.current = window.setTimeout(() => {
+        if (dialogRef.current) {
+          dialogRef.current.classList.add('loading');
+        }
+      }, 200);
+    } else {
+      if (dialogRef.current) {
+        dialogRef.current.classList.remove('loading');
+      }
+    }
+
+    return () => {
+      clearTimeout(timeoutRef.current);
+    };
+  }, [isLoading]);
+
   useEffect(() => {
     setIsLoading(true);
   }, [photo]);
 
   return (
-    <dialog onClick={handleClose} onKeyDown={handleKeys} ref={dialogRef} className={isLoading ? 'loading' : ''}>
+    <dialog onClick={handleClose} onKeyDown={handleKeys} ref={dialogRef}>
       <button>Close</button>
-      <div className='img-skeleton'></div>
+      <div className='loader'></div>
       {photo && 
         <img src={photo.largeUrl} 
           key={photo.id}