refactor: resize performance

frontend/src/components/graph/NodeStatusIndicator.tsx

@@ -1,6 +1,7 @@
 import { useId, useLayoutEffect, useRef, useState } from 'react'
 import type { ReactNode } from 'react'
 import { cn } from '@/lib/utils'
+import { observeResize } from '@/lib/sharedResizeObserver'
 
 export type NodeStatus = 'loading' | 'success' | 'error' | 'initial'
 
@@ -58,27 +59,17 @@ function BorderLoadingIndicator({
     useLayoutEffect(() => {
         const container = containerRef.current
         if (!container) return
-        // Observe the first child (BaseNode) so we use its actual rendered size.
         const target =
             container.firstElementChild instanceof HTMLElement
                 ? container.firstElementChild
                 : container
-        const syncMeasure = () => {
-            const cw = (target as HTMLElement).offsetWidth
-            const ch = (target as HTMLElement).offsetHeight
-            if (cw > 0 && ch > 0) {
-                queueMicrotask(() => setMeasured({ w: cw, h: ch }))
-            }
-        }
-        syncMeasure()
-        const ro = new ResizeObserver((entries) => {
-            const entry = entries[0]
-            if (!entry) return
-            const { width: cw, height: ch } = entry.contentRect
-            setMeasured({ w: Math.round(cw), h: Math.round(ch) })
+        const cw = (target as HTMLElement).offsetWidth
+        const ch = (target as HTMLElement).offsetHeight
+        if (cw > 0 && ch > 0) setMeasured({ w: cw, h: ch })
+        const unObserve = observeResize(target, ({ width: w, height: h }) => {
+            if (w > 0 && h > 0) setMeasured({ w, h })
         })
-        ro.observe(target)
-        return () => ro.disconnect()
+        return unObserve
     }, [])
 
     useLayoutEffect(() => {