dont use useResizeObserver because we want to catch fonts changing

Author: LFDanLu

packages/dev/s2-docs/src/TitleResizer.tsx

@@ -1,10 +1,13 @@
 'use client';
 
 import {useCallback, useRef} from 'react';
-import {useLayoutEffect, useResizeObserver} from '@react-aria/utils';
+import {useLayoutEffect} from '@react-aria/utils';
 
+// TODO: this causes a flash when the headings change size, maybe we just move this code
+// to client and append suppressHydrationWarning to the h1s
 export function TitleResizer() {
   let titleRef = useRef<HTMLHeadingElement>(null);
+  let raf = useRef<number | null>(null);
 
   // Size the title to fit the available space.
   let updateTitleFontSize = useCallback(() => {
@@ -35,13 +38,38 @@ export function TitleResizer() {
 
   useLayoutEffect(() => {
     titleRef.current = document.querySelector('h1');
+
+    if (titleRef.current == null) {
+      return;
+    }
+
     updateTitleFontSize();
-  }, [updateTitleFontSize]);
+    // Use ResizeObserver where available to detect size changes not related to window resizing, e.g. font loading.
+    if (typeof ResizeObserver !== 'undefined') {
+      let observer = new ResizeObserver(() => {
+        if (!raf.current) {
+          // Avoid updating the layout during the resize event and creating circular notifications.
+          raf.current = requestAnimationFrame(() => {
+            updateTitleFontSize();
+            raf.current = null;
+          });
+        }
+      });
+      observer.observe(titleRef.current);
 
-  useResizeObserver({
-    ref: titleRef,
-    onResize: updateTitleFontSize
-  });
+      return () => {
+        observer.disconnect();
+        if (raf.current) {
+          cancelAnimationFrame(raf.current);
+        }
+      };
+    } else {
+      window.addEventListener('resize', updateTitleFontSize);
+      return () => {
+        window.removeEventListener('resize', updateTitleFontSize);
+      };
+    }
+  }, [updateTitleFontSize]);
 
   return null;
 }