From 0f33b0b28b714a0d9621c949ea217daa70a8707a Mon Sep 17 00:00:00 2001
From: Jonas <jonas.badalic@sentry.io>
Date: Tue, 28 May 2024 09:01:26 -0400
Subject: [PATCH] fix(trace): rerun effect when coming from cached request
 (#71404)

We need to ensure qs path is initialized sync and before the children
components render
---
 .../performance/newTraceDetails/index.tsx     | 33 ++++++++++---------
 .../performance/newTraceDetails/trace.tsx     | 12 ++++---
 2 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/static/app/views/performance/newTraceDetails/index.tsx b/static/app/views/performance/newTraceDetails/index.tsx
index e89e2b8bf01a5..899433ef4e1f0 100644
--- a/static/app/views/performance/newTraceDetails/index.tsx
+++ b/static/app/views/performance/newTraceDetails/index.tsx
@@ -247,9 +247,23 @@ function TraceViewContent(props: TraceViewContentProps) {
   }, []);
 
   const initializedRef = useRef(false);
-  const scrollQueueRef = useRef<{eventId?: string; path?: TraceTree.NodePath[]} | null>(
-    null
-  );
+  const scrollQueueRef = useRef<
+    {eventId?: string; path?: TraceTree.NodePath[]} | null | undefined
+  >(undefined);
+
+  if (scrollQueueRef.current === undefined) {
+    const queryParams = qs.parse(location.search);
+    const maybeQueue = decodeScrollQueue(queryParams.node);
+
+    if (maybeQueue || queryParams.eventId) {
+      scrollQueueRef.current = {
+        eventId: queryParams.eventId as string,
+        path: maybeQueue as TraceTreeNode<TraceTree.NodeValue>['path'],
+      };
+    } else {
+      scrollQueueRef.current = null;
+    }
+  }
 
   const previouslyFocusedNodeRef = useRef<TraceTreeNode<TraceTree.NodeValue> | null>(
     null
@@ -397,18 +411,6 @@ function TraceViewContent(props: TraceViewContentProps) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [tree]);
 
-  useLayoutEffect(() => {
-    const queryParams = qs.parse(location.search);
-    const maybeQueue = decodeScrollQueue(queryParams.node);
-
-    if (maybeQueue || queryParams.eventId) {
-      scrollQueueRef.current = {
-        eventId: queryParams.eventId as string,
-        path: maybeQueue as TraceTreeNode<TraceTree.NodeValue>['path'],
-      };
-    }
-  }, [tree]);
-
   const searchingRaf = useRef<{id: number | null} | null>(null);
   const onTraceSearch = useCallback(
     (
@@ -843,7 +845,6 @@ function TraceViewContent(props: TraceViewContentProps) {
       return undefined;
     }
 
-    initializedRef.current = true;
     viewManager.initializeTraceSpace([tree.root.space[0], 0, tree.root.space[1], 1]);
 
     // Whenever the timeline changes, update the trace space
diff --git a/static/app/views/performance/newTraceDetails/trace.tsx b/static/app/views/performance/newTraceDetails/trace.tsx
index 9af44ca4408fe..234d2d243e9fc 100644
--- a/static/app/views/performance/newTraceDetails/trace.tsx
+++ b/static/app/views/performance/newTraceDetails/trace.tsx
@@ -150,10 +150,14 @@ interface TraceProps {
   ) => void;
   previouslyFocusedNodeRef: React.MutableRefObject<TraceTreeNode<TraceTree.NodeValue> | null>;
   rerender: () => void;
-  scrollQueueRef: React.MutableRefObject<{
-    eventId?: string;
-    path?: TraceTree.NodePath[];
-  } | null>;
+  scrollQueueRef: React.MutableRefObject<
+    | {
+        eventId?: string;
+        path?: TraceTree.NodePath[];
+      }
+    | null
+    | undefined
+  >;
   trace: TraceTree;
   trace_dispatch: React.Dispatch<TraceReducerAction>;
   trace_id: string;