Add back flushSync

Author: amanmahajan7

src/hooks/useGridDimensions.ts

@@ -1,4 +1,5 @@
 import { useLayoutEffect, useRef, useState } from 'react';
+import { flushSync } from 'react-dom';
 
 export function useGridDimensions() {
   const gridRef = useRef<HTMLDivElement>(null);
@@ -27,9 +28,12 @@ export function useGridDimensions() {
       const size = entries[0].contentBoxSize[0];
       const { clientHeight, offsetHeight } = gridRef.current!;
 
-      setInlineSize(size.inlineSize);
-      setBlockSize(size.blockSize);
-      setHorizontalScrollbarHeight(offsetHeight - clientHeight);
+      // we use flushSync here to avoid flashing scrollbars
+      flushSync(() => {
+        setInlineSize(size.inlineSize);
+        setBlockSize(size.blockSize);
+        setHorizontalScrollbarHeight(offsetHeight - clientHeight);
+      });
     });
     resizeObserver.observe(gridRef.current!);