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,
                 }}
             />
+            {isImageLoading ? (
+                <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: "https://gluestack.github.io/public-blog-video-assets/saree.png",
-                    uri: image,
+                        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">

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 () => {
+            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">
+                    {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,
+                                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}