fix: refactor ResizeObserver loop in Helpers.tsx

Author: Elessar1802

src/components/common/helpers/Helpers.tsx

@@ -1114,26 +1114,21 @@ export const reloadToastBody = () => {
 
 export function useHeightObserver(callback): [RefObject<HTMLDivElement>] {
     const ref = useRef(null)
-    const callbackRef = useRef(callback)
 
-    useLayoutEffect(() => {
-        callbackRef.current = callback
-    }, [callback])
-
-    const handleHeightChange = useCallback(() => {
-        callbackRef.current?.(ref.current.clientHeight)
-    }, [callbackRef])
-
-    useLayoutEffect(() => {
+    useEffect(() => {
         if (!ref.current) {
             return
         }
-        const observer = new ResizeObserver(handleHeightChange)
+        const observer = new ResizeObserver(() => {
+            /* this will prevent infinite loop */
+            /* the callback will be called only before the next repaint */
+            window.requestAnimationFrame(callback)
+        })
         observer.observe(ref.current)
         return () => {
             observer.disconnect()
         }
-    }, [handleHeightChange, ref])
+    }, [callback])
 
     return [ref]
 }