skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(devtools): prevent profiler bars flickering after change detection (#63350)

Browse Source 
Without trackBy cdkVirtualFor rerenders full list after in each update

PR Close #63350
This commit is contained in:
Avcharov Hryhorii
2025-08-25 17:45:58 +02:00
committed by Andrew Kushnir
parent 67d4449db4
commit 1cb113cdec
2 changed files with 5 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording-timeline/frame-selector/frame-selector.component.html
+1 -1
View File
@@ -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)"
devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording-timeline/frame-selector/frame-selector.component.ts
+4
View File
@@ -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));