From 1a8fe7bb1d1592341bcba72c65b33232208d3d5d Mon Sep 17 00:00:00 2001
From: Andrii Solianyk <asolianik2015@gmail.com>
Date: Mon, 5 May 2025 14:04:54 +0200
Subject: [PATCH] =?UTF-8?q?ikona=20=C5=82adowania=20zdj=C4=99=C4=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ArtisanConnect/app/notice/[id].jsx       | 31 ++++++++++++-------
 ArtisanConnect/components/NoticeCard.jsx | 38 ++++++++++++++++--------
 2 files changed, 46 insertions(+), 23 deletions(-)

diff --git a/ArtisanConnect/app/notice/[id].jsx b/ArtisanConnect/app/notice/[id].jsx
index df17cba..542ac21 100644
--- a/ArtisanConnect/app/notice/[id].jsx
+++ b/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>
     );
-}
+}
\ No newline at end of file
diff --git a/ArtisanConnect/components/NoticeCard.jsx b/ArtisanConnect/components/NoticeCard.jsx
index ce7bd58..ae0ce91 100644
--- a/ArtisanConnect/components/NoticeCard.jsx
+++ b/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}