From 2c35950d273f0e1976718143985db2810fb2554f Mon Sep 17 00:00:00 2001
From: thislight <l1589002388@gmail.com>
Date: Sun, 24 Nov 2024 16:45:24 +0800
Subject: [PATCH] Masonry: fix do not reflow in resizing

---
 src/platform/Masonry.tsx | 35 +++++++++++++++++++++++++++--------
 1 file changed, 27 insertions(+), 8 deletions(-)

diff --git a/src/platform/Masonry.tsx b/src/platform/Masonry.tsx
index 8530783..ab9f002 100644
--- a/src/platform/Masonry.tsx
+++ b/src/platform/Masonry.tsx
@@ -46,30 +46,49 @@ function createCompatMasonry(
 
   const size = createElementSize(element);
 
-  const treeMutObx = new MutationObserver(() => {
-    layout.reloadItems?.();
-  });
+  let layoutNotRequested = true;
 
-  onCleanup(() => treeMutObx.disconnect());
+  const reflow = () => {
+    layout.layout?.();
+    layoutNotRequested = true;
+  };
 
   createRenderEffect(() => {
     const opts = options();
     layout.option?.(opts);
   });
 
+  const treeMutObx = new MutationObserver(() => {
+    layout.reloadItems?.();
+    if (layoutNotRequested) {
+      layoutNotRequested = false;
+      requestAnimationFrame(reflow);
+    }
+  });
+
+  onCleanup(() => treeMutObx.disconnect());
+
   createRenderEffect(() => {
     treeMutObx.observe(element, { childList: true });
   });
 
   createRenderEffect(() => {
     const width = size.width; // only tracking width
-    layout.layout?.();
+    if (layoutNotRequested) {
+      layoutNotRequested = false;
+      requestAnimationFrame(reflow);
+    }
   });
 
   if (import.meta.hot) {
-    import.meta.hot.on("vite:afterUpdate", () => {
-      layout.layout?.();
-    });
+    const onHotReloadUpdate = () => {
+      if (layoutNotRequested) {
+        layoutNotRequested = false;
+        requestAnimationFrame(reflow);
+      }
+    };
+    import.meta.hot.on("vite:afterUpdate", onHotReloadUpdate);
+    import.meta.hot.off("vite:afterUpdate", onHotReloadUpdate);
   }
 }