From d66be817c521e63daaebf3c714e5118df4b81f5d Mon Sep 17 00:00:00 2001
From: Scott Cooper <scttcper@gmail.com>
Date: Thu, 28 Mar 2024 10:29:21 -0700
Subject: [PATCH] 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 https://github.com/getsentry/frontend-tsc/issues/61
---
 static/app/utils/useResizableDrawer.tsx             |  5 ++++-
 .../app/views/performance/newTraceDetails/index.tsx | 13 +++----------
 2 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/static/app/utils/useResizableDrawer.tsx b/static/app/utils/useResizableDrawer.tsx
index ce2e1d441f9c4c..9fcca3c8f72571 100644
--- a/static/app/utils/useResizableDrawer.tsx
+++ b/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());
diff --git a/static/app/views/performance/newTraceDetails/index.tsx b/static/app/views/performance/newTraceDetails/index.tsx
index 35ed71c872a701..c87eecdb724af4 100644
--- a/static/app/views/performance/newTraceDetails/index.tsx
+++ b/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]
   );