From 55bb7cb5c679c704c692f261dcfc7b7b1737bce3 Mon Sep 17 00:00:00 2001
From: Lin Junrong <noron12334@gmail.com>
Date: Fri, 31 Jul 2026 17:44:34 +0800
Subject: [PATCH] fix(GlassSurface): drop the duplicated resize effect
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The component registers the same effect twice — byte-identical bodies, both
creating a ResizeObserver on containerRef and calling updateDisplacementMap.
So every instance runs two observers on one element and rebuilds the SVG
displacement map twice on every resize.

Removes the second copy. All four variants carry the same duplication.
---
 .../Components/GlassSurface/GlassSurface.jsx       | 14 --------------
 .../Components/GlassSurface/GlassSurface.jsx       | 14 --------------
 .../Components/GlassSurface/GlassSurface.tsx       | 14 --------------
 .../Components/GlassSurface/GlassSurface.tsx       | 14 --------------
 4 files changed, 56 deletions(-)

diff --git a/src/content/Components/GlassSurface/GlassSurface.jsx b/src/content/Components/GlassSurface/GlassSurface.jsx
index 304c157a..03f020a4 100644
--- a/src/content/Components/GlassSurface/GlassSurface.jsx
+++ b/src/content/Components/GlassSurface/GlassSurface.jsx
@@ -117,20 +117,6 @@ const GlassSurface = ({
     };
   }, []);
 
-  useEffect(() => {
-    if (!containerRef.current) return;
-
-    const resizeObserver = new ResizeObserver(() => {
-      setTimeout(updateDisplacementMap, 0);
-    });
-
-    resizeObserver.observe(containerRef.current);
-
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, []);
-
   useEffect(() => {
     setTimeout(updateDisplacementMap, 0);
   }, [width, height]);
diff --git a/src/tailwind/Components/GlassSurface/GlassSurface.jsx b/src/tailwind/Components/GlassSurface/GlassSurface.jsx
index 48e0d946..f5435f92 100644
--- a/src/tailwind/Components/GlassSurface/GlassSurface.jsx
+++ b/src/tailwind/Components/GlassSurface/GlassSurface.jsx
@@ -135,20 +135,6 @@ const GlassSurface = ({
     };
   }, []);
 
-  useEffect(() => {
-    if (!containerRef.current) return;
-
-    const resizeObserver = new ResizeObserver(() => {
-      setTimeout(updateDisplacementMap, 0);
-    });
-
-    resizeObserver.observe(containerRef.current);
-
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, []);
-
   useEffect(() => {
     setTimeout(updateDisplacementMap, 0);
   }, [width, height]);
diff --git a/src/ts-default/Components/GlassSurface/GlassSurface.tsx b/src/ts-default/Components/GlassSurface/GlassSurface.tsx
index 795f6bba..1c14166d 100644
--- a/src/ts-default/Components/GlassSurface/GlassSurface.tsx
+++ b/src/ts-default/Components/GlassSurface/GlassSurface.tsx
@@ -157,20 +157,6 @@ const GlassSurface: React.FC<GlassSurfaceProps> = ({
     };
   }, []);
 
-  useEffect(() => {
-    if (!containerRef.current) return;
-
-    const resizeObserver = new ResizeObserver(() => {
-      setTimeout(updateDisplacementMap, 0);
-    });
-
-    resizeObserver.observe(containerRef.current);
-
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, []);
-
   useEffect(() => {
     setTimeout(updateDisplacementMap, 0);
   }, [width, height]);
diff --git a/src/ts-tailwind/Components/GlassSurface/GlassSurface.tsx b/src/ts-tailwind/Components/GlassSurface/GlassSurface.tsx
index 4c7f3848..93458101 100644
--- a/src/ts-tailwind/Components/GlassSurface/GlassSurface.tsx
+++ b/src/ts-tailwind/Components/GlassSurface/GlassSurface.tsx
@@ -179,20 +179,6 @@ const GlassSurface: React.FC<GlassSurfaceProps> = ({
     };
   }, []);
 
-  useEffect(() => {
-    if (!containerRef.current) return;
-
-    const resizeObserver = new ResizeObserver(() => {
-      setTimeout(updateDisplacementMap, 0);
-    });
-
-    resizeObserver.observe(containerRef.current);
-
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, []);
-
   useEffect(() => {
     setTimeout(updateDisplacementMap, 0);
   }, [width, height]);