perf: reduce re-render zooming

Signed-off-by: Innei <tukon479@gmail.com>
RSSNext · Nov 14, 2024 · 9b35074 · 9b35074
1 parent 4b63023
commit 9b35074
Showing 1 changed file with 11 additions and 5 deletions.
diff --git a/apps/renderer/src/components/ui/media/preview-media.tsx b/apps/renderer/src/components/ui/media/preview-media.tsx
@@ -335,7 +335,8 @@ const FallbackableImage: FC<
   const maxContainerHeight = windowHeight - 32 - 40
   const maxContainerWidth = windowWidth - 80 - 80 - (haveSideContent ? 400 : 0)
 
-  const [scale, setScale] = useState(1)
+  const [zoomingState, setZoomingState] = useState<"zoom-in" | "zoom-out" | null>(null)
+  const [zoomContainerWidth, setZoomContainerWidth] = useState(0)
 
   const wrapperClass = cn("relative !max-h-full", width && height && width <= height && "!h-full")
   const wrapperStyle: React.CSSProperties = {
@@ -354,18 +355,23 @@ const FallbackableImage: FC<
         <TransformWrapper
           wheel={{ smoothStep: 0.008 }}
           onZoom={(e) => {
-            setScale(e.state.scale)
+            if (e.state.scale !== 1) {
+              setZoomingState(e.state.scale > 1 ? "zoom-in" : "zoom-out")
+            } else {
+              setZoomingState(null)
+            }
+            setZoomContainerWidth(Math.min(maxContainerWidth, e.state.scale * imgWidth))
           }}
         >
           <TransformComponent
             wrapperClass={wrapperClass}
             wrapperStyle={{
               ...wrapperStyle,
               minWidth:
-                scale > 1 && !haveSideContent
-                  ? `${Math.min(maxContainerWidth, scale * imgWidth)}px`
+                zoomingState === "zoom-in" && !haveSideContent
+                  ? `${zoomContainerWidth}px`
                   : undefined,
-              height: scale > 1 ? "100%" : undefined,
+              height: zoomingState === "zoom-in" ? "100%" : undefined,
             }}
             contentClass={wrapperClass}
             contentStyle={wrapperStyle}