From 1cb113cdec088068da4e3633911df531def895fc Mon Sep 17 00:00:00 2001
From: Avcharov Hryhorii <avchargrisha@gmail.com>
Date: Mon, 25 Aug 2025 17:45:58 +0200
Subject: [PATCH] fix(devtools): prevent profiler bars flickering after change
 detection (#63350)

Without trackBy cdkVirtualFor rerenders full list after in each update

PR Close #63350
---
 .../frame-selector/frame-selector.component.html              | 2 +-
 .../frame-selector/frame-selector.component.ts                | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording-timeline/frame-selector/frame-selector.component.html b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording-timeline/frame-selector/frame-selector.component.html
index e4db7b65bbb..af4dc255b81 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording-timeline/frame-selector/frame-selector.component.html
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording-timeline/frame-selector/frame-selector.component.html
@@ -23,7 +23,7 @@
   [class.drag-scrolling]="dragScrolling()"
 >
   <div
-    *cdkVirtualFor="let d of graphData(); let i = index"
+    *cdkVirtualFor="let d of graphData(); let i = index; trackBy: trackByIndex"
     [ngStyle]="d.style"
     class="frame-bar"
     [class.selected]="selectedFrameIndexes().has(i)"
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording-timeline/frame-selector/frame-selector.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording-timeline/frame-selector/frame-selector.component.ts
index 02f6698ec06..5f4d99aaf4c 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording-timeline/frame-selector/frame-selector.component.ts
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording-timeline/frame-selector/frame-selector.component.ts
@@ -250,6 +250,10 @@ export class FrameSelectorComponent {
       this._viewportScrollState.scrollLeft - dx * DRAG_SCROLL_SPEED;
   }
 
+  trackByIndex(index: number): number {
+    return index;
+  }
+
   private getBarStyles(frame: ProfilerFrame, multiplicationFactor: number): GraphNode {
     const height = frame.duration * multiplicationFactor;
     const colorPercentage = Math.max(10, Math.round((height / MAX_HEIGHT) * 100));