Elgato_dark/angular
1
0
Fork 0
mirror of https://github.com/angular/angular synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording-timeline/frame-selector/frame-selector.component.html
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)"

4
devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording-timeline/frame-selector/frame-selector.component.ts
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));