From 874d3ef3f057b49f9e1c19888e4ecf3f2f016180 Mon Sep 17 00:00:00 2001
From: RabeeAbuBaker <rabee.abubaker@gmail.com>
Date: Wed, 2 Oct 2024 03:00:21 +0300
Subject: [PATCH] fix(hooks): resolve hydration issues by deferring state
 updates with startTransition in useResizing

---
 .../AppShell/use-resizing/use-resizing.tsx    | 25 ++++++++++++-------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/packages/@mantine/core/src/components/AppShell/use-resizing/use-resizing.tsx b/packages/@mantine/core/src/components/AppShell/use-resizing/use-resizing.tsx
index 902284c7274..f3a8e10d44f 100644
--- a/packages/@mantine/core/src/components/AppShell/use-resizing/use-resizing.tsx
+++ b/packages/@mantine/core/src/components/AppShell/use-resizing/use-resizing.tsx
@@ -14,18 +14,25 @@ export function useResizing({ transitionDuration, disabled }: UseResizingInput)
   useWindowEvent('resize', () => {
     setResizing(true);
     clearTimeout(resizingTimeout.current);
-    resizingTimeout.current = window.setTimeout(() => setResizing(false), 200);
+    resizingTimeout.current = window.setTimeout(
+      () =>
+        startTransition(() => {
+          setResizing(false);
+        }),
+      200
+    );
   });
 
   useIsomorphicEffect(() => {
-    startTransition(() => {
-      setResizing(true);
-      clearTimeout(disabledTimeout.current);
-      disabledTimeout.current = window.setTimeout(
-        () => setResizing(false),
-        transitionDuration || 0
-      );
-    });
+    setResizing(true);
+    clearTimeout(disabledTimeout.current);
+    disabledTimeout.current = window.setTimeout(
+      () =>
+        startTransition(() => {
+          setResizing(false);
+        }),
+      transitionDuration || 0
+    );
   }, [disabled, transitionDuration]);
 
   return resizing;