refactor: Optimize IntersectionObserver in Summary component

- Create IntersectionObserver only once and reuse it for performance.
- Add `isObservingRef` to prevent redundant observer operations.
- Improve observer lifecycle management for infinite scrolling.

Author: SingTheCode

packages/view/src/components/VerticalClusterList/Summary/Summary.tsx

@@ -33,38 +33,49 @@ const Summary = ({ onLoadMore, isLoadingMore, enabled, isLastPage }: SummaryProp
 
   const sentinelRef = useRef<HTMLDivElement>(null);
   const observerRef = useRef<IntersectionObserver | null>(null);
+  const isObservingRef = useRef(false);
 
-  // Infinite scroll: Load data when sentinel is detected
-  const handleRowsRendered = ({ stopIndex }: { startIndex: number; stopIndex: number }) => {
-    if (!isLastPage && stopIndex >= clusters.length && sentinelRef.current && enabled) {
+  // Create IntersectionObserver once and reuse it
+  useEffect(() => {
+    observerRef.current = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting && !isLoadingMore && enabled) {
+          onLoadMore();
+        }
+      },
+      {
+        root: null,
+        rootMargin: "100px",
+        threshold: 0.1,
+      }
+    );
+
+    return () => {
       if (observerRef.current) {
         observerRef.current.disconnect();
+        observerRef.current = null;
       }
+      isObservingRef.current = false;
+    };
+  }, [enabled, isLoadingMore, onLoadMore]);
 
-      observerRef.current = new IntersectionObserver(
-        (entries) => {
-          if (entries[0].isIntersecting && !isLoadingMore && enabled) {
-            onLoadMore();
-          }
-        },
-        {
-          root: null,
-          rootMargin: "100px",
-          threshold: 0.1,
-        }
-      );
-
-      observerRef.current.observe(sentinelRef.current);
+  // Infinite scroll: Observe sentinel when it's rendered
+  const handleRowsRendered = ({ stopIndex }: { startIndex: number; stopIndex: number }) => {
+    if (!isLastPage && stopIndex >= clusters.length && sentinelRef.current && enabled && observerRef.current) {
+      if (!isObservingRef.current) {
+        observerRef.current.observe(sentinelRef.current);
+        isObservingRef.current = true;
+      }
     }
   };
 
+  // Unobserve when sentinel is no longer needed
   useEffect(() => {
-    return () => {
-      if (observerRef.current) {
-        observerRef.current.disconnect();
-      }
-    };
-  }, []);
+    if (isLastPage && observerRef.current && isObservingRef.current) {
+      observerRef.current.disconnect();
+      isObservingRef.current = false;
+    }
+  }, [isLastPage]);
 
   const onClickClusterSummary = (clusterId: number) => () => {
     const selected = getClusterById(filteredData, clusterId);