ikona ładowania zdjęć

ArtisanConnect/components/NoticeCard.jsx

@@ -5,7 +5,7 @@ import {Image} from "@/components/ui/image";
 import {Text} from "@/components/ui/text";
 import {VStack} from "@/components/ui/vstack";
 import {Link} from "expo-router";
-import {Pressable} from "react-native";
+import {Pressable, ActivityIndicator} from "react-native";
 import {useWishlist} from "@/store/wishlistStore";
 import {Ionicons} from "@expo/vector-icons";
 import {useEffect, useState} from "react";
@@ -19,12 +19,20 @@ export function NoticeCard({notice}) {
     const isInWishlist = useWishlist((state) =>
         state.wishlistNotices.some((item) => item.noticeId === notice.noticeId)
     );
-    const [image, setImage] = useState("https://http.cat/404.jpg");
+    const [image, setImage] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
 
     useEffect(() => {
         const fetchImage = async () => {
-            let imageUrl = await getImageByNoticeId(notice.noticeId);
-            setImage(imageUrl);
+            setIsLoading(true);
+            try {
+                let imageUrl = await getImageByNoticeId(notice.noticeId);
+                setImage(imageUrl);
+            } catch (error) {
+                console.error("Błąd podczas pobierania obrazu:", error);
+            } finally {
+                setIsLoading(false);
+            }
         };
 
         fetchImage();
@@ -34,14 +42,20 @@ export function NoticeCard({notice}) {
         <Link href={`/notice/${notice.noticeId}`} asChild>
             <Pressable className="flex-1">
                 <Card className="p-0 rounded-lg max-w-[460px]  flex-1">
-                    <Image
-                        source={{
-                            uri: image,
-                        }}
-                        className=" h-auto w-full rounded-md aspect-[1/1]"
-                        alt="image"
-                        resizeMode="cover"
-                    />
+                    {isLoading ? (
+                        <Box className="h-auto w-full rounded-md aspect-[1/1] bg-gray-100 items-center justify-center">
+                            <ActivityIndicator size="large" color="#3b82f6" />
+                        </Box>
+                    ) : (
+                        <Image
+                            source={{
+                                uri: image || "https://http.cat/404.jpg",
+                            }}
+                            className="h-auto w-full rounded-md aspect-[1/1]"
+                            alt="image"
+                            resizeMode="cover"
+                        />
+                    )}
                     <VStack className="p-2">
                         <Text className="text-sm font-normal mb-2 text-typography-700">
                             {notice.title}