Debounce resize listener

Author: frederickobrien

dotcom-rendering/src/components/InteractivesScrollbarWidth.importable.tsx

@@ -2,25 +2,43 @@ import { useEffect } from 'react';
 
 export const InteractivesScrollbarWidth = () => {
 	useEffect(() => {
-		updateScrollbarWidth();
-		window.addEventListener('resize', updateScrollbarWidth);
-		return () => {
-			window.removeEventListener('resize', updateScrollbarWidth);
+		const updateScrollbarWidth = () => {
+			const documentWidth = document.documentElement.clientWidth;
+			if (documentWidth <= 0) return;
+
+			const scrollbarWidth = window.innerWidth - documentWidth;
+			const root = document.documentElement;
+
+			root.style.setProperty('--scrollbar-width', `${scrollbarWidth}px`);
+			root.style.setProperty(
+				'--half-scrollbar-width',
+				`${scrollbarWidth / 2}px`,
+			);
 		};
-	}, []);
-	return null;
-};
 
-const updateScrollbarWidth = () => {
-	const documentWidth = document.documentElement.clientWidth;
-	if (documentWidth <= 0) {
-		return;
-	}
+		let timeoutId: ReturnType<typeof setTimeout> | null = null;
+
+		const debouncedResize = () => {
+			if (timeoutId) {
+				clearTimeout(timeoutId);
+			}
 
-	const scrollbarWidth = window.innerWidth - documentWidth;
+			timeoutId = setTimeout(() => {
+				updateScrollbarWidth();
+			}, 150);
+		};
+
+		updateScrollbarWidth();
+
+		window.addEventListener('resize', debouncedResize);
 
-	const root = document.documentElement;
+		return () => {
+			if (timeoutId) {
+				clearTimeout(timeoutId);
+			}
+			window.removeEventListener('resize', debouncedResize);
+		};
+	}, []);
 
-	root.style.setProperty('--scrollbar-width', `${scrollbarWidth}px`);
-	root.style.setProperty('--half-scrollbar-width', `${scrollbarWidth / 2}px`);
+	return null;
 };