feat(trace): Change state priority on trace drawer resize

Fixes the lag from resizing the trace drawer by removing render batching on the size updates and lowering the priority of state updates in a parent component.

fixes getsentry/frontend-tsc#61

static/app/utils/useResizableDrawer.tsx

@@ -1,4 +1,5 @@
 import {useCallback, useLayoutEffect, useRef, useState} from 'react';
+import {flushSync} from 'react-dom';
 
 export interface UseResizableDrawerOptions {
   /**
@@ -68,7 +69,9 @@ export function useResizableDrawer(options: UseResizableDrawerOptions): {
 
   const updateSize = useCallback(
     (newSize: number) => {
-      setSize(newSize);
+      flushSync(() => {
+        setSize(newSize);
+      });
       options.onResize(newSize);
       if (options.sizeStorageKey) {
         localStorage.setItem(options.sizeStorageKey, newSize.toString());

static/app/views/performance/newTraceDetails/index.tsx

@@ -1,5 +1,6 @@
 import type React from 'react';
 import {
+  startTransition,
   useCallback,
   useEffect,
   useLayoutEffect,
@@ -59,10 +60,6 @@ import {
 } from 'sentry/views/performance/newTraceDetails/traceTabs';
 import {VirtualizedViewManager} from 'sentry/views/performance/newTraceDetails/virtualizedViewManager';
 
-import {
-  cancelAnimationTimeout,
-  requestAnimationTimeout,
-} from '../../../utils/profiling/hooks/useVirtualizedTree/virtualizedTreeUtils';
 import Breadcrumb from '../breadcrumb';
 
 import TraceDrawer from './traceDrawer/traceDrawer';
@@ -535,13 +532,9 @@ function TraceViewContent(props: TraceViewContentProps) {
     [setTracePreferences]
   );
 
-  const resizeAnimationTimeoutRef = useRef<{id: number} | null>(null);
   const onDrawerResize = useCallback(
     (size: number) => {
-      if (resizeAnimationTimeoutRef.current !== null) {
-        cancelAnimationTimeout(resizeAnimationTimeoutRef.current);
-      }
-      resizeAnimationTimeoutRef.current = requestAnimationTimeout(() => {
+      startTransition(() => {
         setTracePreferences(previousPreferences => {
           return {
             ...previousPreferences,
@@ -552,7 +545,7 @@ function TraceViewContent(props: TraceViewContentProps) {
                 : window.innerWidth),
           };
         });
-      }, 1000);
+      });
     },
     [setTracePreferences]
   );