ADD: Registration page and update image handling in notices

src/pages/NoticeDetails.jsx

@@ -12,21 +12,33 @@ export default function NoticeDetails() {
   const [notice, setNotice] = useState(null);
   const [images, setImages] = useState([]);
   const [isLoading, setIsLoading] = useState(true);
+  const [isImagesLoading, setIsImagesLoading] = useState(true);
 
   useEffect(() => {
     let isMounted = true;
 
-    const loadData = async () => {
+    const loadNotice = async () => {
       setIsLoading(true);
       try {
         let found = notices.find((item) => String(item.noticeId) === String(id));
         if (!found) {
           found = await getNoticeById(id);
         }
-
-        const imageUrls = await getAllImagesByNoticeId(id);
         if (isMounted) {
           setNotice(found);
+        }
+      } finally {
+        if (isMounted) {
+          setIsLoading(false);
+        }
+      }
+    };
+
+    const loadImages = async () => {
+      setIsImagesLoading(true);
+      try {
+        const imageUrls = await getAllImagesByNoticeId(id);
+        if (isMounted) {
           setImages(imageUrls);
         } else {
           imageUrls.forEach((imageUrl) => {
@@ -37,12 +49,13 @@ export default function NoticeDetails() {
         }
       } finally {
         if (isMounted) {
-          setIsLoading(false);
+          setIsImagesLoading(false);
         }
       }
     };
 
-    loadData();
+    loadNotice();
+    loadImages();
 
     return () => {
       isMounted = false;
@@ -104,14 +117,30 @@ export default function NoticeDetails() {
       </div>
 
       <div className="grid gap-3 sm:grid-cols-2">
-        {images.map((image, index) => (
-          <img
-            alt={`${notice.title} ${index + 1}`}
-            className="aspect-[4/3] w-full rounded-lg border border-gray-200 bg-gray-100 object-cover"
-            key={`${image}-${index}`}
-            src={image}
-          />
-        ))}
+        {isImagesLoading ? (
+          <div className="flex aspect-4/3 w-full items-center justify-center rounded-lg border border-gray-200 bg-gray-100 sm:col-span-2">
+            <span
+              aria-label="Loading images"
+              className="h-8 w-8 animate-spin rounded-full border-4 border-gray-300 border-t-primary"
+              role="status"
+            />
+          </div>
+        ) : images.length > 0 ? (
+          images.map((image, index) => (
+            <img
+              alt={`${notice.title} ${index + 1}`}
+              className="aspect-4/3 w-full rounded-lg border border-gray-200 bg-gray-100 object-cover"
+              key={`${image}-${index}`}
+              src={image}
+            />
+          ))
+        ) : (
+          <div className="flex aspect-4/3 w-full items-center justify-center rounded-lg border border-gray-200 bg-gray-100 sm:col-span-2">
+            <span className="rounded-md bg-gray-200 px-3 py-1 text-sm font-medium text-gray-600">
+              No Image
+            </span>
+          </div>
+        )}
            <div className="rounded-lg border border-gray-200 bg-white p-4">
         <h2 className="mb-2 text-sm font-semibold uppercase tracking-wide text-gray-500">Opis</h2>
         <p className="whitespace-pre-wrap text-gray-700">{notice.description}</p>