Improve big pictures

picture-gallery-client/src/ImageGallery/Image.tsx

@@ -2,18 +2,23 @@ import { PhotoProps } from "react-photo-album";
 import React from "react";
 import { Backdrop } from "@mui/material";
 import { ImageWithThumbnail } from "./models";
+import { Spinner } from "./Spinner";
 
 export const Image = <T extends ImageWithThumbnail>({
   imageProps: { alt, style, src: _useSrcAndThumbnailFromPhoto, ...rest },
   photo,
 }: PhotoProps<T>): JSX.Element => {
   const [open, setOpen] = React.useState(false);
+  const [loaded, setLoaded] = React.useState(false);
   const handleClose = () => {
     setOpen(false);
   };
   const handleToggle = () => {
     setOpen(!open);
   };
+  const handleImageLoaded = () => {
+    setLoaded(true);
+  };
 
   return (
     <>
@@ -26,13 +31,25 @@ export const Image = <T extends ImageWithThumbnail>({
         src={photo.thumbnail}
         onClick={handleToggle}
       />
-      <Backdrop
+      {open && (
-        sx={{ color: "#fff", zIndex: (theme) => theme.zIndex.drawer + 1 }}
+        <Backdrop
-        open={open}
+          sx={{ color: "#fff", zIndex: (theme) => theme.zIndex.drawer + 1 }}
-        onClick={handleClose}
+          open={open}
-      >
+          onClick={handleClose}
-        <img alt={alt} {...rest} src={photo.src} />
+        >
-      </Backdrop>
+          {!loaded && <Spinner />}
+          <img
+            alt={alt}
+            style={{
+              maxHeight: "90%",
+              maxWidth: "90%",
+            }}
+            {...rest}
+            src={photo.src}
+            onLoad={handleImageLoaded}
+          />
+        </Backdrop>
+      )}
     </>
   );
 };

picture-gallery-client/src/ImageGallery/Spinner.tsx

@@ -0,0 +1,12 @@
+import env from "../env";
+import { CircularProgress } from "@mui/material";
+import React from "react";
+
+export const Spinner = (): JSX.Element => {
+  return (
+    <CircularProgress
+      style={{ color: env.REACT_APP_APPBAR_COLOR ?? "#1976D2" }}
+      size={100}
+    />
+  );
+};

picture-gallery-client/src/ImageGalleryLayout.tsx

@@ -2,14 +2,13 @@ import React, { useEffect, useState } from "react";
 import Box from "@mui/material/Box";
 import CssBaseline from "@mui/material/CssBaseline";
 import { useLocation, useNavigate } from "react-router-dom";
-import { CircularProgress } from "@mui/material";
 import { Folders, ImageWithThumbnail } from "./ImageGallery/models";
 import ImageGalleryAppBar from "./ImageGallery/ImageGalleryAppBar";
 import DrawerHeader from "./MuiLayout/DrawerHeader";
 import ImageGalleryDrawer from "./ImageGallery/ImageGalleryDrawer";
 import ImageGallery from "./ImageGallery/ImageGallery";
 import Main from "./MuiLayout/Main";
-import env from "./env";
+import { Spinner } from "./ImageGallery/Spinner";
 
 const drawerWidth = 240;
 
@@ -87,13 +86,7 @@ function ImageGalleryLayout() {
       />
       <Main open={open} drawerwidth={drawerWidth}>
         <DrawerHeader />
-        {imagesLoaded ? (
+        {imagesLoaded ? <ImageGallery images={images} /> : <Spinner />}
-          <ImageGallery images={images} />
-        ) : (
-          <CircularProgress
-            style={{ color: env.REACT_APP_APPBAR_COLOR ?? "#1976D2" }}
-          />
-        )}
       </Main>
     </Box>
   );

picture-gallery-client/src/index.tsx

@@ -12,9 +12,11 @@ const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement
 );
 root.render(
-  <BrowserRouter>
+  <React.StrictMode>
-    <ImageGalleryLayout />
+    <BrowserRouter>
-  </BrowserRouter>
+      <ImageGalleryLayout />
+    </BrowserRouter>
+  </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function