@expofp/ui 3.26.0 → 3.27.1

package/dist/shared/hooks/useWindowSize.js

@@ -1,37 +1,35 @@
 import { useEffect, useState } from 'react';
-export const useWindowSize = () => {
-    const [windowSize, setWindowSize] = useState(() => {
-        const isInIframe = window !== window.top;
-        if (isInIframe) {
-            return {
-                width: document.documentElement.clientWidth || window.innerWidth,
-                height: document.documentElement.clientHeight || window.innerHeight,
-            };
-        }
+/**
+ * How long the window size must hold still before consumers see it. A live window drag fires
+ * `resize` on every frame, and a state update per frame re-renders every consumer's subtree for
+ * the whole drag — for layout breakpoints, one update once the drag settles is enough.
+ */
+const RESIZE_DEBOUNCE_MS = 200;
+const measure = () => {
+    const isInIframe = window !== window.top;
+    if (isInIframe) {
         return {
-            width: window.innerWidth,
-            height: window.innerHeight,
+            width: document.documentElement.clientWidth || window.innerWidth,
+            height: document.documentElement.clientHeight || window.innerHeight,
         };
-    });
+    }
+    return {
+        width: window.innerWidth,
+        height: window.innerHeight,
+    };
+};
+export const useWindowSize = () => {
+    const [windowSize, setWindowSize] = useState(measure);
     useEffect(() => {
+        let timeoutId;
         const handleResize = () => {
-            const isInIframe = window !== window.top;
-            if (isInIframe) {
-                setWindowSize({
-                    width: document.documentElement.clientWidth || window.innerWidth,
-                    height: document.documentElement.clientHeight || window.innerHeight,
-                });
-            }
-            else {
-                setWindowSize({
-                    width: window.innerWidth,
-                    height: window.innerHeight,
-                });
-            }
+            clearTimeout(timeoutId);
+            timeoutId = setTimeout(() => setWindowSize(measure()), RESIZE_DEBOUNCE_MS);
         };
         window.addEventListener('resize', handleResize);
         window.addEventListener('orientationchange', handleResize);
         return () => {
+            clearTimeout(timeoutId);
             window.removeEventListener('resize', handleResize);
             window.removeEventListener('orientationchange', handleResize);
         };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expofp/ui",
-  "version": "3.26.0",
+  "version": "3.27.1",
   "type": "module",
   "description": "ExpoFP SDK internal: shared pure React UI components",
   "homepage": "https://developer.expofp.com/",