From 524a4552949136f1635fca1ef32d028ced528274 Mon Sep 17 00:00:00 2001
From: Innei <tukon479@gmail.com>
Date: Mon, 21 Oct 2024 14:14:05 +0800
Subject: [PATCH] fix: masonry re-render loop

Signed-off-by: Innei <tukon479@gmail.com>
---
 apps/renderer/src/components/ui/Masonry.tsx | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/apps/renderer/src/components/ui/Masonry.tsx b/apps/renderer/src/components/ui/Masonry.tsx
index cb152efc3..9b1fcc026 100644
--- a/apps/renderer/src/components/ui/Masonry.tsx
+++ b/apps/renderer/src/components/ui/Masonry.tsx
@@ -1,7 +1,8 @@
+// @copy internal masonic hooks
 import { clearRequestTimeout, requestTimeout } from "@essentials/request-timeout"
 import { useWindowSize } from "@react-hook/window-size"
 import { useForceUpdate } from "framer-motion"
-import { throttle } from "lodash-es"
+import { isEqual, throttle } from "lodash-es"
 import type { ContainerPosition, MasonryProps, MasonryScrollerProps, Positioner } from "masonic"
 import { createResizeObserver, useMasonry, usePositioner, useScrollToIndex } from "masonic"
 import * as React from "react"
@@ -188,10 +189,14 @@ function useContainerPosition(
 
   React.useEffect(() => {
     const resizeObserver = new ResizeObserver(() => {
-      setContainerPosition((prev) => ({
-        ...prev,
-        width: elementRef.current?.offsetWidth || 0,
-      }))
+      setContainerPosition((prev) => {
+        const next = {
+          ...prev,
+          width: elementRef.current?.offsetWidth || 0,
+        }
+        if (isEqual(next, prev)) return prev
+        return next
+      })
     })
     resizeObserver.observe(elementRef.current as HTMLElement)
     return () => {