frontend

frontend/src/detail/PreviewZoomOverlay.jsx

@@ -25,10 +25,68 @@ const PreviewZoomOverlay = ({
   const portalTarget = ensureDocumentRoot();
   const [isNativeScale, setIsNativeScale] = useState(false);
   const [naturalSize, setNaturalSize] = useState({ width: null, height: null });
+  const [renderBackdrop, setRenderBackdrop] = useState(false);
+  const [isBackdropVisible, setBackdropVisible] = useState(false);
+  const [displaySnapshot, setDisplaySnapshot] = useState(null);
   const scrollRef = useRef(null);
   const imageRef = useRef(null);
   const focusRef = useRef(null);
   const previouslyFocusedRef = useRef(null);
+  const visibilityTimerRef = useRef(null);
+  const displayTimerRef = useRef(null);
+
+  useEffect(() => {
+    if (display?.url) {
+      setDisplaySnapshot(display);
+    }
+  }, [display]);
+
+  useEffect(() => {
+    if (visibilityTimerRef.current) {
+      clearTimeout(visibilityTimerRef.current);
+      visibilityTimerRef.current = null;
+    }
+    if (displayTimerRef.current) {
+      cancelAnimationFrame(displayTimerRef.current);
+      displayTimerRef.current = null;
+    }
+
+    if (open && display?.url) {
+      setRenderBackdrop(true);
+      displayTimerRef.current = requestAnimationFrame(() => {
+        displayTimerRef.current = requestAnimationFrame(() => {
+          setBackdropVisible(true);
+        });
+      });
+      return () => {
+        if (displayTimerRef.current) {
+          cancelAnimationFrame(displayTimerRef.current);
+          displayTimerRef.current = null;
+        }
+      };
+    }
+
+    setBackdropVisible(false);
+    visibilityTimerRef.current = setTimeout(() => {
+      setRenderBackdrop(false);
+    }, 260);
+
+    return () => {
+      if (visibilityTimerRef.current) {
+        clearTimeout(visibilityTimerRef.current);
+        visibilityTimerRef.current = null;
+      }
+    };
+  }, [open, display?.url]);
+
+  useEffect(() => () => {
+    if (visibilityTimerRef.current) {
+      clearTimeout(visibilityTimerRef.current);
+    }
+    if (displayTimerRef.current) {
+      cancelAnimationFrame(displayTimerRef.current);
+    }
+  }, []);
 
   useEffect(() => {
     setIsNativeScale(false);
@@ -75,7 +133,7 @@ const PreviewZoomOverlay = ({
         previouslyFocusedRef.current.focus();
       }
       previouslyFocusedRef.current = null;
-      return undefined;
+      return;
     }
 
     if (typeof document !== 'undefined') {
@@ -86,24 +144,24 @@ const PreviewZoomOverlay = ({
         previouslyFocusedRef.current = null;
       }
     }
+  }, [open]);
 
-    const scrollEl = scrollRef.current;
-    if (!scrollEl) {
+  const activeDisplay = open && display?.url ? display : displaySnapshot;
+
+  useEffect(() => {
+    if (!renderBackdrop || !activeDisplay?.url) {
       return undefined;
     }
 
     const frame = requestAnimationFrame(() => {
-      scrollEl.focus();
+      const scrollEl = scrollRef.current;
+      if (scrollEl && typeof scrollEl.focus === 'function') {
+        scrollEl.focus({ preventScroll: true });
+      }
     });
 
-    return () => {
-      cancelAnimationFrame(frame);
-      if (previouslyFocusedRef.current && typeof previouslyFocusedRef.current.focus === 'function') {
-        previouslyFocusedRef.current.focus();
-        previouslyFocusedRef.current = null;
-      }
-    };
-  }, [open]);
+    return () => cancelAnimationFrame(frame);
+  }, [renderBackdrop, activeDisplay?.url]);
 
   const handleKeyDown = (event) => {
     event.stopPropagation();
@@ -119,26 +177,27 @@ const PreviewZoomOverlay = ({
     }
 
     if (event.key === 'ArrowLeft') {
-      if (display?.canGoPrev && display?.goPrev) {
+      if (activeDisplay?.canGoPrev && activeDisplay?.goPrev) {
         event.preventDefault();
-        display.goPrev();
+        activeDisplay.goPrev();
       }
       return;
     }
 
     if (event.key === 'ArrowRight') {
-      if (display?.canGoNext && display?.goNext) {
+      if (activeDisplay?.canGoNext && activeDisplay?.goNext) {
         event.preventDefault();
-        display.goNext();
+        activeDisplay.goNext();
       }
     }
   };
 
-  if (!open || !display?.url || !portalTarget) {
+  if (!renderBackdrop || !activeDisplay?.url || !portalTarget) {
     return null;
   }
 
-  const navVisible = Boolean(display?.canGoPrev || display?.canGoNext);
+  const effectiveDisplay = activeDisplay;
+  const navVisible = Boolean(effectiveDisplay?.canGoPrev || effectiveDisplay?.canGoNext);
   const stageClassName = [
     'preview-zoom__stage',
   ]
@@ -152,6 +211,13 @@ const PreviewZoomOverlay = ({
     .filter(Boolean)
     .join(' ');
 
+  const backdropClassName = [
+    'preview-zoom-backdrop',
+    isBackdropVisible ? 'preview-zoom-backdrop--visible' : '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
   const imageStyle = isNativeScale
     ? {
         cursor: 'zoom-out',
@@ -169,7 +235,7 @@ const PreviewZoomOverlay = ({
   return createPortal(
     (
       <div
-        className="preview-zoom-backdrop"
+        className={backdropClassName}
         role="dialog"
         aria-modal="true"
         aria-label="Enlarged document preview"
@@ -186,8 +252,8 @@ const PreviewZoomOverlay = ({
           tabIndex={-1}
         >
           <img
-            src={display.url}
-            alt={display.alt || 'Document preview'}
+            src={effectiveDisplay.url}
+            alt={effectiveDisplay.alt || 'Document preview'}
             className="preview-zoom__image"
             ref={imageRef}
             draggable={false}
@@ -227,12 +293,12 @@ const PreviewZoomOverlay = ({
               className="preview-zoom__nav-button"
                 onClick={(event) => {
                   event.stopPropagation();
-                  if (display?.canGoPrev && display?.goPrev) {
-                    display.goPrev();
+                  if (effectiveDisplay?.canGoPrev && effectiveDisplay?.goPrev) {
+                    effectiveDisplay.goPrev();
                   }
                 }}
                 aria-label="Previous preview"
-                disabled={!display?.canGoPrev}
+                disabled={!effectiveDisplay?.canGoPrev}
               >
                 <ArrowLeftIcon />
               </button>
@@ -241,12 +307,12 @@ const PreviewZoomOverlay = ({
                 className="preview-zoom__nav-button"
                 onClick={(event) => {
                   event.stopPropagation();
-                  if (display?.canGoNext && display?.goNext) {
-                    display.goNext();
+                  if (effectiveDisplay?.canGoNext && effectiveDisplay?.goNext) {
+                    effectiveDisplay.goNext();
                   }
                 }}
                 aria-label="Next preview"
-                disabled={!display?.canGoNext}
+                disabled={!effectiveDisplay?.canGoNext}
               >
                 <ArrowRightIcon />
               </button>