refactor: useWindowSize hook to re-render only after resize complet…

…ion (#1704)

* refactor: useWindowSize hook

* chore: force min-width and tweak changeset

* chore: tweak changeset

---------

Co-authored-by: Daniel Sinclair <d@niel.nyc>

.changeset/curly-spoons-look.md

@@ -0,0 +1,5 @@
+---
+"@rainbow-me/rainbowkit": patch
+---
+
+Fixed an issue that caused components to re-render on every window resize event. Now components will only re-render once the user has finished resizing their window.

packages/rainbowkit/src/components/ConnectOptions/DesktopOptions.css.ts

@@ -1,5 +1,5 @@
 import { style } from '@vanilla-extract/css';
-import { largeScreenMinWidth, sprinkles } from '../../css/sprinkles.css';
+import { sprinkles } from '../../css/sprinkles.css';
 export const QRCodeBackgroundClassName = style([
   {
     background: 'white',
@@ -18,12 +18,7 @@ export const ScrollClassName = style([
 
 // biome-ignore format: design system keys
 export const sidebar = style({
-  '@media': {
-    [`screen and (min-width: ${largeScreenMinWidth}px)`]: {
-      minWidth: '287px',
-    },
-  },
-  'minWidth': '246px',
+  minWidth: '287px',
 });
 
 export const sidebarCompactMode = style({

packages/rainbowkit/src/components/Dialog/DialogContent.css.ts

@@ -42,14 +42,8 @@ export const dialogContentWideMobile = style([
 export const dialogContentWideDesktop = style([
   dialogContent,
   {
-    width: largeScreenMinWidth,
-  },
-  {
-    '@media': {
-      [`screen and (min-width: ${largeScreenMinWidth}px)`]: {
-        width: '720px',
-      },
-    },
+    minWidth: '720px',
+    width: '720px',
   },
 ]);
 

packages/rainbowkit/src/hooks/useWindowSize.ts

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import { debounce } from '../utils/debounce';
 
 export const useWindowSize = () => {
   const [windowSize, setWindowSize] = useState<{
@@ -8,13 +9,14 @@ export const useWindowSize = () => {
     height: undefined,
     width: undefined,
   });
+
   useEffect(() => {
-    function handleResize() {
+    const handleResize = debounce(() => {
       setWindowSize({
         height: window.innerHeight,
         width: window.innerWidth,
       });
-    }
+    }, 500); // 500ms debounce by default
     window.addEventListener('resize', handleResize);
     handleResize();
     return () => window.removeEventListener('resize', handleResize);

packages/rainbowkit/src/utils/debounce.ts

@@ -0,0 +1,14 @@
+export function debounce(fn: () => void, ms: number) {
+  let timer: NodeJS.Timeout | null;
+
+  return () => {
+    if (timer) {
+      clearTimeout(timer);
+    }
+
+    timer = setTimeout(() => {
+      timer = null;
+      fn();
+    }, ms);
+  };
+}