fix(trace): fix iteration (#66075)

We were skipping past some indices which resulted in a few visual
glitches

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

@@ -982,7 +982,7 @@ function RenderPlaceholderRow(props: {
             height="12px"
             width={randomBetween(20, 80) + '%'}
             style={{
-              transition: 'all 5s ease-out',
+              transition: 'all 30s ease-out',
             }}
           />
         </div>
@@ -1000,7 +1000,7 @@ function RenderPlaceholderRow(props: {
           height="12px"
           width={randomBetween(20, 80) + '%'}
           style={{
-            transition: 'all 5s ease-out',
+            transition: 'all 30s ease-out',
             transform: `translate(${randomBetween(0, 200) + 'px'}, 0)`,
           }}
         />

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

@@ -860,7 +860,17 @@ export class VirtualizedViewManager {
     const listWidth = list_width * 100 + '%';
     const spanWidth = span_list_width * 100 + '%';
 
-    for (let i = 0; i < this.columns.list.column_refs.length; i++) {
+    // JavaScript "arrays" are nice in the sense that they are really just dicts,
+    // allowing us to store negative indices. This sometimes happens as the list
+    // virtualizes the rows and we end up with a negative index as they are being
+    // rendered off screen.
+    const overscroll = this.list?.props.overscanRowCount ?? 0;
+    const start = -overscroll;
+    const end = this.columns.list.column_refs.length + overscroll;
+
+    for (let i = start; i < end; i++) {
+      while (this.span_bars[i] === undefined && i < end) i++;
+
       const list = this.columns.list.column_refs[i];
       if (list) list.style.width = listWidth;
       const span = this.columns.span_list.column_refs[i];