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
-                source={{
-                    // uri: "https://gluestack.github.io/public-blog-video-assets/saree.png",
-                    uri: image,
-                }}
-                className=" h-auto w-full rounded-md aspect-[1/1]"
-                alt="image"
-                resizeMode="cover"
-            />
+            {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: 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>
     );
-}
+}