Retry zoom fit until transform content mounts

Author: VanshajPoonia

frontend/src/components/Media/ZoomableImage.tsx

@@ -18,6 +18,7 @@ const LINE_HEIGHT_MULTIPLIER = 33;
 const MAX_SCALE = 8;
 const MIN_SCALE = 1;
 const SCALE_EPSILON = 0.0001;
+const MAX_FIT_RETRY_FRAMES = 12;
 
 type Size = {
   width: number;
@@ -162,6 +163,7 @@ export const ZoomableImage = forwardRef<ZoomableImageRef, ZoomableImageProps>(
     const hasPendingFitRef = useRef(true);
     const fitTransformRef = useRef<FitTransform | null>(null);
     const fitFrameRef = useRef<number | null>(null);
+    const fitRetryCountRef = useRef(0);
     const [isOverflowing, setIsOverflowing] = useState(false);
     const [minScale, setMinScale] = useState(MIN_SCALE);
     const rotationRef = useRef(rotation);
@@ -252,40 +254,47 @@ export const ZoomableImage = forwardRef<ZoomableImageRef, ZoomableImageProps>(
       hasUserInteractedRef.current = false;
       hasPendingFitRef.current = true;
       fitTransformRef.current = null;
+      fitRetryCountRef.current = 0;
     }, []);
 
     const applyFitTransform = useCallback(
       (duration = 200, animationType: AnimationType = 'easeOut') => {
+        const transform = transformRef.current;
+        const contentElement = transform?.instance?.contentComponent;
         const viewportElement = getViewportElement();
-        if (!transformRef.current || !viewportElement || !imageRef.current)
-          return;
+        if (!transform || !contentElement || !viewportElement || !imageRef.current)
+          return false;
 
         const wrapperRect = viewportElement.getBoundingClientRect();
+        if (!wrapperRect.width || !wrapperRect.height) return false;
+
         const baseDimensions = getBaseDimensions();
 
-        if (!baseDimensions) return;
+        if (!baseDimensions) return false;
 
         const fitTransform = getFitTransform(
           baseDimensions,
           wrapperRect.width,
           wrapperRect.height,
         );
 
-        if (!fitTransform) return;
+        if (!fitTransform) return false;
 
         fitTransformRef.current = fitTransform;
         isFitInitializedRef.current = true;
         hasUserInteractedRef.current = false;
         hasPendingFitRef.current = false;
+        fitRetryCountRef.current = 0;
         setMinimumScale(fitTransform.scale);
-        transformRef.current.setTransform(
+        transform.setTransform(
           fitTransform.positionX,
           fitTransform.positionY,
           fitTransform.scale,
           duration,
           animationType,
         );
         setIsOverflowing(false);
+        return true;
       },
       [getBaseDimensions, getViewportElement, setMinimumScale],
     );
@@ -302,7 +311,16 @@ export const ZoomableImage = forwardRef<ZoomableImageRef, ZoomableImageProps>(
 
         fitFrameRef.current = scheduleFrame(() => {
           fitFrameRef.current = null;
-          applyFitTransform(duration, animationType);
+          const applied = applyFitTransform(duration, animationType);
+
+          if (
+            !applied &&
+            hasPendingFitRef.current &&
+            fitRetryCountRef.current < MAX_FIT_RETRY_FRAMES
+          ) {
+            fitRetryCountRef.current += 1;
+            scheduleFitTransform(duration, animationType);
+          }
         });
       },
       [applyFitTransform, clearScheduledFit],
@@ -418,9 +436,14 @@ export const ZoomableImage = forwardRef<ZoomableImageRef, ZoomableImageProps>(
         e.preventDefault();
         e.stopPropagation();
         e.stopImmediatePropagation();
-        clearScheduledFit();
 
         if (!imageRef.current || !transformRef.current) return;
+        if (!transformRef.current.instance.contentComponent) {
+          scheduleFitTransform(0);
+          return;
+        }
+
+        clearScheduledFit();
 
         const transformState = transformRef.current.instance.transformState;
         const viewportElement = getViewportElement() ?? wheelElement;

frontend/src/components/Media/__tests__/ZoomableImage.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
 import type { ReactNode, Ref } from 'react';
 import { ZoomableImage } from '../ZoomableImage';
 
@@ -17,6 +17,8 @@ const mockSetTransform = jest.fn(
   },
 );
 let mockWrapperComponent: HTMLDivElement | null = null;
+let mockContentComponent: HTMLDivElement | null = null;
+let mockShouldExposeContentComponent = true;
 
 jest.mock('@tauri-apps/api/core', () => ({
   convertFileSrc: (path: string) => path,
@@ -32,6 +34,11 @@ jest.mock('react-zoom-pan-pinch', () => {
           get wrapperComponent() {
             return mockWrapperComponent;
           },
+          get contentComponent() {
+            return mockShouldExposeContentComponent
+              ? mockContentComponent
+              : null;
+          },
           transformState: mockTransformState,
         },
         setTransform: mockSetTransform,
@@ -48,7 +55,16 @@ jest.mock('react-zoom-pan-pinch', () => {
   );
 
   const TransformComponent = ({ children }: { children: ReactNode }) =>
-    React.createElement('div', null, children);
+    React.createElement(
+      'div',
+      {
+        'data-testid': 'transform-content',
+        ref: (node: HTMLDivElement | null) => {
+          mockContentComponent = node;
+        },
+      },
+      children,
+    );
 
   return {
     TransformWrapper,
@@ -122,9 +138,11 @@ const setupWheelScene = ({
   const { container } = renderZoomableImage();
   const wheelArea = container.firstElementChild as HTMLElement;
   const transformWrapper = screen.getByTestId('transform-wrapper');
+  const transformContent = screen.getByTestId('transform-content');
   const image = screen.getByAltText('test image');
 
   mockWrapperComponent = transformWrapper as HTMLDivElement;
+  mockContentComponent = transformContent as HTMLDivElement;
 
   mockElementRect(
     wheelArea,
@@ -180,6 +198,8 @@ describe('ZoomableImage wheel behavior', () => {
     // Keep the internal wrapper unavailable by default so tests cover the
     // production fallback path where the wheel area owns scroll handling.
     mockWrapperComponent = null;
+    mockContentComponent = null;
+    mockShouldExposeContentComponent = true;
     mockTransformState.scale = 1;
     mockTransformState.positionX = 0;
     mockTransformState.positionY = 0;
@@ -345,6 +365,52 @@ describe('ZoomableImage wheel behavior', () => {
     expectLatestTransform(-90, -70, 0.6);
   });
 
+  test('retries initial fit until the transform content is ready', () => {
+    jest.useFakeTimers();
+    mockShouldExposeContentComponent = false;
+
+    const { container } = renderZoomableImage();
+
+    const wheelArea = container.firstElementChild as HTMLElement;
+    const transformWrapper = screen.getByTestId('transform-wrapper');
+    const transformContent = screen.getByTestId('transform-content');
+    const image = screen.getByAltText('test image');
+
+    mockWrapperComponent = transformWrapper as HTMLDivElement;
+    mockElementRect(
+      wheelArea,
+      { width: 500, height: 400, left: 0, top: 0 },
+      { clientWidth: 500, clientHeight: 400 },
+    );
+    mockElementRect(
+      transformWrapper,
+      { width: 500, height: 400, left: 0, top: 0 },
+      { clientWidth: 500, clientHeight: 400 },
+    );
+    mockElementRect(
+      image,
+      { width: 1000, height: 800, left: 0, top: 0 },
+      { clientWidth: 1000, clientHeight: 800 },
+    );
+
+    fireEvent.load(image);
+
+    act(() => {
+      jest.runOnlyPendingTimers();
+    });
+    expect(mockSetTransform).not.toHaveBeenCalled();
+
+    mockShouldExposeContentComponent = true;
+    mockContentComponent = transformContent as HTMLDivElement;
+
+    act(() => {
+      jest.runOnlyPendingTimers();
+    });
+
+    expectLatestTransform(0, 0, 0.5);
+    jest.useRealTimers();
+  });
+
   test('starts from the new image fit transform after switching images', () => {
     const { container, rerender } = renderZoomableImage({
       imagePath: '/tmp/photo-a.jpg',