Add skeleton loading state to GalleryItem for improved image loading …

…experience
astriaai · Jan 15, 2025 · a1ac0e6 · a1ac0e6
1 parent 5515046
commit a1ac0e6
Showing 1 changed file with 7 additions and 12 deletions.
diff --git a/src/components/GalleryItem.tsx b/src/components/GalleryItem.tsx
@@ -5,6 +5,7 @@ import { useNavigate } from "react-router-dom";
 import { useLike } from "@/hooks/useLike";
 import { useCopy } from "@/hooks/useCopy";
 import { Prompt } from "@/types";
+import { Skeleton } from "./ui/skeleton";
 
 interface GalleryItemProps {
   prompt: Prompt;
@@ -15,6 +16,7 @@ const GalleryItem: React.FC<GalleryItemProps> = ({ prompt, index }) => {
   const navigate = useNavigate();
   const { isLiked: initialIsLiked, handleLike } = useLike(prompt.liked);
   const { isCopied, handleCopy } = useCopy();
+  const [imageLoaded, setImageLoaded] = useState(false);
 
   // Local state to track like status and like count
   const [isLiked, setIsLiked] = useState(initialIsLiked);
@@ -40,19 +42,12 @@ const GalleryItem: React.FC<GalleryItemProps> = ({ prompt, index }) => {
       }
     >
       <div className="relative group">
+        {!imageLoaded && <Skeleton className="w-full h-[300px]" />}
         <img
           className="w-full h-auto max-w-full max-h-[600px] object-cover"
-          src={
-            prompt.images?.[0] ??
-            "https://www.astria.ai/assets/logo-b4e21f646fb5879eb91113a70eae015a7413de8920960799acb72c60ad4eaa99.png"
-          }
+          src={prompt.images?.[0]}
           alt={`Image ${prompt.id}`}
-          loading="lazy"
-          onError={(e) => {
-            e.currentTarget.onerror = null;
-            e.currentTarget.src =
-              "https://www.astria.ai/assets/logo-b4e21f646fb5879eb91113a70eae015a7413de8920960799acb72c60ad4eaa99.png";
-          }}
+          onLoad={() => setImageLoaded(true)}
         />
         <div className="absolute bottom-0 left-0 w-full bg-gradient-to-t from-black from-0% bg-opacity-50 p-1 md:p-4 flex justify-between items-center md:opacity-0 md:group-hover:opacity-100 md:transition-opacity md:duration-300">
           <div className="text-sm text-white font-medium hover:bg-white hover:bg-opacity-20 px-4 py-2 rounded-full cursor-pointer">
@@ -62,8 +57,8 @@ const GalleryItem: React.FC<GalleryItemProps> = ({ prompt, index }) => {
             <button
               className={`p-2 rounded-full transition-colors ${isCopied ? "bg-green-500" : "hover:bg-white/20"}`}
               onClick={(e) => {
-          e.stopPropagation();
-          handleCopy(prompt);
+                e.stopPropagation();
+                handleCopy(prompt);
               }}
               aria-label="Copy prompt text"
             >