Files
iptvnator/libs/workspace/dashboard/feature
36be6495f2 perf(dashboard): hold rail skeletons back so empty rails stop shifting the page (#1738)
* perf(dashboard): hold rail skeletons back so empty rails stop shifting the page

On every launch with sources the dashboard shifted by about 0.23 (the
"good" CLS threshold is 0.1). The rails render as soon as their own data
arrives, and each loading rail showed a 328 px skeleton immediately. On a
normal profile the live-favorites and recent-content sources resolve empty
15-20 ms later, so their skeletons flashed and collapsed and every rail
below jumped up by about 360 px. J1 never saw it: its layout-shift window
ends at the first card, which is painted just before the collapse.

Rail skeletons now wait out a 300 ms grace period (createRailSkeletonGrace)
and appear only for a rail still loading after it; the hero keeps its
immediate skeleton because it reserves the top of the page. Recorded over
three renderer reloads of a seeded profile, the dashboard's layout shift
drops from 0.219-0.234 to 0.0004, with the real rails painted at the same
time as before. Plan thread C5, journey J1.

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

* fix(dashboard): gate rail skeletons per rail, never above visible rails

Addresses the Codex and Greptile reviews on #1738. The component-wide grace
timer started when the dashboard was created, so a rail that begins loading
later (Xtream recently added, TMDB) showed its skeleton at once and could
still flash and collapse; and after the grace period a slow rail's skeleton
could appear above rails that already showed cards, pushing them down and,
if it resolved empty, back up.

createRailSkeletonGates now keeps one gate per rail, in template order: the
grace period counts from that rail's own loading start, a skeleton is never
inserted above a rail that already has cards (the real rail inserts at most
once instead), and a shown skeleton stays until its own rail finishes so the
first arriving rail does not collapse the others in a cascade. Nine specs
cover the fast path, per-rail start, the no-content-below rule, latching,
reloading, destroy and a zero grace period. The seeded-profile timeline is
unchanged at 0.0004 across three renderer reloads.

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>
2026-09-28 14:24:14 +02:00
..

Workspace Dashboard Feature

This library owns the workspace dashboard rails UI. The dashboard is a read-only surface over existing playlist, recent, favorites, EPG, and Xtream catalog data; it should not introduce Electron IPC, SQLite schema, or route contracts on its own.

Dashboard Surfaces

The dashboard renders a surface only when the matching setting is enabled. Data rails also require the underlying data slice to have at least one item.

  • hero shows the full-width cinematic banner that rotates between the newest unfinished title, a favourite (or recent) channel with a programme on air, and favourite / recently added titles. Contract: docs/architecture/workspace-dashboard.md#cinematic-hero.
  • continueWatching shows recent movies and series from DashboardDataService.globalRecentVodItems() using cover cards with playback progress when a saved resume position is available.
  • liveFavorites shows favorited live TV channels from DashboardDataService.globalFavoriteLiveItems() using the channel layout with EPG title, time range, and progress when XMLTV data is available.
  • recentlyWatchedLive shows recently watched live TV channels from DashboardDataService.globalRecentLiveItems() using the same channel layout.
  • favoriteMoviesAndSeries shows favorited movies and series from DashboardDataService.globalFavoriteItems(), excluding live favorites, using cover cards.
  • recentSources shows recently used playlist/source entries.
  • xtreamRecentlyAdded shows recently added Xtream catalog items.
  • tmdbRecommendations shows "Because you watched X" — TMDB recommendations seeded from recently watched movies/series, kept to titles that exist in an imported Xtream library. Needs the TMDB opt-in and the Electron DB worker (hidden in the PWA), and hides itself below five matched cards. Data: DashboardRecommendationsService in workspace/dashboard/data-access.
  • tmdbTrending shows TMDB's weekly trending titles, matched against the imported Xtream libraries. Same TMDB/Electron gating; unmatched cards open the global search prefilled. Data: DashboardTrendingService.

Settings

Per-surface visibility lives on Settings.dashboardRails as a DashboardRailsSettings object. Every surface defaults to enabled. Stored settings are deep-merged with DEFAULT_DASHBOARD_RAILS_SETTINGS by SettingsStore, so existing users and older partial settings keep newly added surfaces visible unless they explicitly turn them off.

The global showDashboard flag remains a top-level Settings property because workspace startup and route guards already depend on that contract. The Settings UI groups showDashboard and the per-surface checkboxes in the Dashboard section. When showDashboard is off, the per-surface checkboxes are disabled because the dashboard route itself is hidden.

Navigation

Rail cards use the navigation state provided by DashboardDataService for the underlying item. Rail "See all" links may also pass router state:

  • live rails open the relevant collection on Live TV.
  • cover rails for movies/series open Global Recent or Global Favorites on Movies when movie items are present, otherwise on Series.

This keeps the global collection pages from defaulting to Live TV when a dashboard rail is clearly about movies or series.