From 412426bac34490f08b6718ee929eeeccd6ed4bdc Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Fri, 1 Nov 2024 02:12:00 +0000
Subject: [PATCH] Derive aspect on the fly

---
 src/view/com/util/images/AutoSizedImage.tsx | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/view/com/util/images/AutoSizedImage.tsx b/src/view/com/util/images/AutoSizedImage.tsx
index 49c7312433..c074309c04 100644
--- a/src/view/com/util/images/AutoSizedImage.tsx
+++ b/src/view/com/util/images/AutoSizedImage.tsx
@@ -21,22 +21,21 @@ export function useImageAspectRatio({
   src: string
   dimensions: Dimensions | undefined
 }) {
-  const [raw, setAspectRatio] = React.useState(() => {
-    const dims = dimensions ?? imageSizes.get(src)
-    return dims ? calc(dims) : undefined
-  })
+  const [dims, setDims] = React.useState(
+    () => dimensions ?? imageSizes.get(src),
+  )
 
   const [prevSrc, setPrevSrc] = React.useState(src)
   if (src !== prevSrc) {
-    const dims = dimensions ?? imageSizes.get(src)
-    setAspectRatio(dims ? calc(dims) : undefined)
+    setDims(dimensions ?? imageSizes.get(src))
     setPrevSrc(src)
   }
 
   let constrained: number | undefined
   let max: number | undefined
   let isCropped: boolean | undefined
-  if (raw !== undefined) {
+  if (dims !== undefined) {
+    const raw = calc(dims)
     const ratio = 1 / 2 // max of 1:2 ratio in feeds
     constrained = Math.max(raw, ratio)
     max = Math.max(raw, 0.25) // max of 1:4 in thread
@@ -45,15 +44,15 @@ export function useImageAspectRatio({
 
   React.useEffect(() => {
     let aborted = false
-    if (raw !== undefined) return
-    imageSizes.fetch(src).then(newDim => {
+    if (dims !== undefined) return
+    imageSizes.fetch(src).then(newDims => {
       if (aborted) return
-      setAspectRatio(calc(newDim))
+      setDims(newDims)
     })
     return () => {
       aborted = true
     }
-  }, [raw, setAspectRatio, src])
+  }, [dims, setDims, src])
 
   return {
     constrained,