Loading & Failure State for Image Modals (#53)

* lock file update

* add loading and failure states to modal component

* better modal opening ux for photos

* Populate readme

Author: rexgreenway

README.md

@@ -0,0 +1,9 @@
+# Rex Greenway - Personal Website Code
+
+Personal website written in React for projects both in software and photography.
+
+## Running
+
+This repository uses simple npm as follows:
+
+`npm run dev`

package-lock.json

@@ -21,6 +21,7 @@
 }
 
 .ImageModal {
+  background-color: white;
   border: 10px solid white;
   border-radius: 5px;
   max-width: 100%;
@@ -33,4 +34,8 @@
   top: 10px;
   right: 10px;
   cursor: pointer;
+}
+
+.Failed {
+  color: red;
 }

src/containers/Modal.module.css

@@ -1,5 +1,6 @@
 import { ReactNode, useEffect } from "react";
 import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import { CircularProgress } from "@mui/material";
 
 import styles from "./Modal.module.css";
 
@@ -39,14 +40,22 @@ const ImageModal = ({
   isOpen,
   close,
 }: {
-  src: string;
+  src?: string;
   isOpen: boolean;
   close: () => void;
 }) => {
   return (
     isOpen && (
       <Modal close={close}>
-        <img className={styles.ImageModal} src={src} />
+        {!src ? (
+          <CircularProgress className={styles.ImageModal} color="inherit" />
+        ) : src === "FAILED" ? (
+          <div className={`${styles.ImageModal} ${styles.Failed}`}>
+            Failed to load image.
+          </div>
+        ) : (
+          <img className={styles.ImageModal} src={src} />
+        )}
       </Modal>
     )
   );

src/containers/Modal.tsx

@@ -20,10 +20,16 @@ const Collection = () => {
   const [imageSrc, setImageSrc] = useState<string>("");
 
   const handleOpen = (image_name: string) => {
-    getPhoto(image_name).then((image) => {
-      setImageSrc(image.url);
-      setOpenModal(true);
-    });
+    // Open modal immediately
+    setOpenModal(true);
+    getPhoto(image_name)
+      .then((image) => {
+        setImageSrc(image.url);
+      })
+      .catch((error) => {
+        console.error("Error fetching image:", error);
+        setImageSrc("FAILED");
+      });
   };
 
   if (!(collectionId! in ALBUMS) || collectionId === undefined) {