From c399ad45e724bf0afc31318644279897f9d5295f Mon Sep 17 00:00:00 2001
From: Maryna _Kosau <50210952+marinakosova@users.noreply.github.com>
Date: Sat, 1 Oct 2022 10:43:15 -0500
Subject: [PATCH] fix: add spinner to prevent previous capture appearance
 (#827)

---
 src/components/CaptureDetailDialog.js | 33 +++++++++++++++++++++------
 src/components/OptimizedImage.js      |  4 ++++
 2 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/src/components/CaptureDetailDialog.js b/src/components/CaptureDetailDialog.js
index 28b5b81bc..0cb0dfc3b 100644
--- a/src/components/CaptureDetailDialog.js
+++ b/src/components/CaptureDetailDialog.js
@@ -11,6 +11,7 @@ import {
   Drawer,
   Box,
   Link,
+  CircularProgress,
 } from '@material-ui/core';
 import Close from '@material-ui/icons/Close';
 import OptimizedImage from './OptimizedImage';
@@ -82,6 +83,9 @@ const useStyles = makeStyles((theme) => ({
   itemValue: {
     lineHeight: 1.7,
   },
+  spinner: {
+    position: 'fixed',
+  },
 }));
 
 function CaptureDetailDialog(props) {
@@ -91,6 +95,7 @@ function CaptureDetailDialog(props) {
   const [snackbarLabel, setSnackbarLabel] = useState('');
   const [renderCapture, setRenderCapture] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
+  const [isImageLoading, setIsImageLoading] = useState(true);
   const classes = useStyles();
 
   // This is causing unnecessary re-renders right now, but may be useful if we want to navigate between captures by id
@@ -139,6 +144,7 @@ function CaptureDetailDialog(props) {
     if (isLoading) {
       setIsLoading(false);
     }
+    setIsImageLoading(true);
   }, [cdContext.capture]);
 
   useEffect(() => {
@@ -356,13 +362,26 @@ function CaptureDetailDialog(props) {
           }}
           maxWidth="md"
         >
-          <OptimizedImage
-            src={renderCapture?.image_url}
-            width={window.innerHeight * 0.9}
-            style={{ maxWidth: '100%' }}
-            objectFit="contain"
-            fixed
-          />
+          {isLoading ? (
+            <CircularProgress className={classes.spinner} />
+          ) : (
+            <>
+              {isImageLoading && (
+                <CircularProgress className={classes.spinner} />
+              )}
+
+              <OptimizedImage
+                src={renderCapture?.image_url}
+                width={window.innerHeight * 0.9}
+                style={{ maxWidth: '100%' }}
+                objectFit="contain"
+                fixed
+                onImageReady={() => {
+                  setIsImageLoading(false);
+                }}
+              />
+            </>
+          )}
         </Dialog>
         <Drawer
           anchor="right"
diff --git a/src/components/OptimizedImage.js b/src/components/OptimizedImage.js
index be7e5d742..8926372a9 100644
--- a/src/components/OptimizedImage.js
+++ b/src/components/OptimizedImage.js
@@ -18,6 +18,7 @@ export default function OptimizedImage(props) {
     alertPosition,
     alertTextSize,
     alertTitleSize,
+    onImageReady,
     objectFit = 'cover',
     ...rest
   } = props;
@@ -72,6 +73,9 @@ export default function OptimizedImage(props) {
           srcSet={srcSet}
           sizes={sizes}
           loading="lazy"
+          onLoad={() => {
+            onImageReady && onImageReady();
+          }}
           style={{
             position: 'absolute',
             left: 0,