perf(dashboard): place live EPG progress fills without layout or animation (#1721)

* perf(dashboard): slide live EPG progress fills with a compositor transform

The live-programme bars on channel rail cards and the hero animated their
width over 0.4 s whenever the 30 s live-EPG tick moved them. Width is a
layout property, so each tick re-laid out the whole document for about 24
frames, also while the window was minimized. Slide a full-width fill with
translateX driven by a --live-progress custom property instead; Chromium
runs that transition on the compositor. Reduced motion drops it.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* test(dashboard): format the live progress spec

* perf(dashboard): stop animating the live EPG progress fills

A live-EPG tick moves the bar by under one percent, so the 0.4 s transform
transition was invisible but still produced a burst of compositor frames
on every tick. Place the fill without a transition.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

* test(dashboard): pin the hero progress fill to its custom property

The hero moved into DashboardHeroComponent (#1738); its progress bar gets
the same transform fill as the rail cards.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

---------

Co-authored-by: 4gray <fourgray@proton.me>
Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
authored and GitHub committed 2026-09-30 07:16:57 +02:00
1 parent 484920f10a
commit 4343150170
7 files changed
+63 -4

No files matched your search

@@ -0,0 +1,8 @@
---
type: perf
area: dashboard
---
Live programme progress bars on the dashboard now move without animating or
redrawing the whole page, so a dashboard left open with recent live channels
uses less CPU and GPU.