ikona ładowania zdjęć

ArtisanConnect/app/notice/[id].jsx

@@ -14,7 +14,8 @@ import {useEffect, useState} from "react";
 
 export default function NoticeDetails() {
     const {id} = useLocalSearchParams();
-    const [image, setImage] = useState("https://http.cat/404.jpg");
+    const [image, setImage] = useState(null);
+    const [isImageLoading, setIsImageLoading] = useState(true);
 
     const {
         data: notice,
@@ -27,12 +28,15 @@ export default function NoticeDetails() {
 
     useEffect(() => {
         const fetchImage = async () => {
+            setIsImageLoading(true);
             if (notice) {
                 try {
                     const imageData = await getImageByNoticeId(notice.noticeId);
                     setImage(imageData);
                 } catch (err) {
                     console.error("Błąd przy pobieraniu obrazu:", err);
+                } finally {
+                    setIsImageLoading(false);
                 }
             }
         };
@@ -55,15 +59,20 @@ export default function NoticeDetails() {
                     title: notice.title,
                 }}
             />
-            <Image
+            {isImageLoading ? (
-                source={{
+                <Box className="h-auto w-full rounded-md aspect-[1/1] bg-gray-100 items-center justify-center">
-                    // uri: "https://gluestack.github.io/public-blog-video-assets/saree.png",
+                    <ActivityIndicator size="large" color="#3b82f6" />
-                    uri: image,
+                </Box>
-                }}
+            ) : (
-                className=" h-auto w-full rounded-md aspect-[1/1]"
+                <Image
-                alt="image"
+                    source={{
-                resizeMode="cover"
+                        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">
@@ -82,4 +91,4 @@ export default function NoticeDetails() {
             </VStack>
         </Card>
     );
-}
+}

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);
+            setIsLoading(true);
-            setImage(imageUrl);
+            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
+                    {isLoading ? (
-                        source={{
+                        <Box className="h-auto w-full rounded-md aspect-[1/1] bg-gray-100 items-center justify-center">
-                            uri: image,
+                            <ActivityIndicator size="large" color="#3b82f6" />
-                        }}
+                        </Box>
-                        className=" h-auto w-full rounded-md aspect-[1/1]"
+                    ) : (
-                        alt="image"
+                        <Image
-                        resizeMode="cover"
+                            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}