From 0b5e874a0683f06730ca9acc4f95491b112cf4c5 Mon Sep 17 00:00:00 2001 From: 4gray Date: Sun, 27 Sep 2026 11:17:07 +0200 Subject: [PATCH] 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 --- .changes/dashboard-live-progress-compositor.md | 6 +++--- .../src/lib/rails/dashboard-rail.component.scss | 12 ++++-------- 2 files changed, 7 insertions(+), 11 deletions(-) diff --git a/.changes/dashboard-live-progress-compositor.md b/.changes/dashboard-live-progress-compositor.md index 30d85bd9e..d6d7d6ae1 100644 --- a/.changes/dashboard-live-progress-compositor.md +++ b/.changes/dashboard-live-progress-compositor.md @@ -3,6 +3,6 @@ type: perf area: dashboard --- -Live programme progress bars on the dashboard now advance without redrawing -the whole page, so a dashboard left open with recent live channels uses less -CPU and GPU. +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. diff --git a/libs/workspace/dashboard/feature/src/lib/rails/dashboard-rail.component.scss b/libs/workspace/dashboard/feature/src/lib/rails/dashboard-rail.component.scss index ffc9af8d1..0816357bb 100644 --- a/libs/workspace/dashboard/feature/src/lib/rails/dashboard-rail.component.scss +++ b/libs/workspace/dashboard/feature/src/lib/rails/dashboard-rail.component.scss @@ -731,15 +731,11 @@ height: 100%; background: var(--app-live-color, #ff8f8f); border-radius: 2px; - // A full-width fill slid into view, not an animated width: the - // transform transition runs on the compositor, so each live-EPG tick - // no longer re-lays out the whole page for every transition frame. + // A full-width fill slid into place, neither a width nor animated: a + // live-EPG tick moves it by under one percent, so an animation was + // invisible yet cost a layout pass (width) or a burst of compositor + // frames (transform transition) on every tick. transform: translateX(calc(var(--live-progress, 0) * 1% - 100%)); - transition: transform 0.4s ease; - - @media (prefers-reduced-motion: reduce) { - transition: none; - } } &--idle i {