You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
A brief white flash is visible on the History calendar (MonthGrid) when navigating to the History view. The flash lasts a fraction of a second before the dark cells render correctly. It is reproducible on the production site (workout.umulig.org) and on PR previews, confirming it predates any recent changes.
Two FOUC fixes were shipped in #163 (blocking inline script in index.html + synchronous data-theme in ThemeProvider's useState initialiser) which eliminated the initial page-load flash, but the History calendar flash persists on navigation.
Not a page-load FOUC — the index.html blocking script and synchronous ThemeProvider fix did not resolve it
Not a data-theme timing issue — by the time the user navigates to History the attribute is already set
Likely root cause:
When the History view mounts, it renders with loading: true. During this window, the MonthGrid calendar cells that rely on var(--surface-card) or similar tokens may briefly render without a background before the loading state resolves and real data paints. The token --surface-card is only defined inside [data-theme="g100"] — if for any reason the selector doesn't match immediately on the newly mounted subtree, cells fall back to transparent/white.
A secondary hypothesis: Carbon's Theme component (used in ChangelogModal and IntroModal) renders a wrapping <div> with its own data-carbon-theme attribute. If any CSS specificity chain involving that attribute is interfering with History's cell background, navigation could briefly lose the correct token value.
Affected file:app/src/components/History.jsx — specifically the MonthGrid rendering and any loading-skeleton containers that use var(--surface-card).
UI spec (Carbon g100)
Calendar cells and all loading-skeleton containers in MonthGrid must render with the correct dark background (var(--surface-card) = #18181b) from the very first paint on navigation — no white flash at any point.
Acceptance criteria
Navigating to History from any other view shows no white flash on the calendar
Reproducible on production (workout.umulig.org) — flash is gone
No regression in History edit mode, session expand, or filter behaviour
Passes existing Vitest suite (npm test)
Out of scope
Redesigning the History loading skeleton
Changes to the MonthGrid layout or interaction behaviour
Summary
A brief white flash is visible on the History calendar (MonthGrid) when navigating to the History view. The flash lasts a fraction of a second before the dark cells render correctly. It is reproducible on the production site (workout.umulig.org) and on PR previews, confirming it predates any recent changes.
Two FOUC fixes were shipped in #163 (blocking inline script in
index.html+ synchronousdata-themeinThemeProvider'suseStateinitialiser) which eliminated the initial page-load flash, but the History calendar flash persists on navigation.Priority
Medium
Investigation notes
What has already been ruled out:
index.htmlblocking script and synchronousThemeProviderfix did not resolve itdata-themetiming issue — by the time the user navigates to History the attribute is already setLikely root cause:
When the History view mounts, it renders with
loading: true. During this window, theMonthGridcalendar cells that rely onvar(--surface-card)or similar tokens may briefly render without a background before the loading state resolves and real data paints. The token--surface-cardis only defined inside[data-theme="g100"]— if for any reason the selector doesn't match immediately on the newly mounted subtree, cells fall back to transparent/white.A secondary hypothesis: Carbon's
Themecomponent (used inChangelogModalandIntroModal) renders a wrapping<div>with its owndata-carbon-themeattribute. If any CSS specificity chain involving that attribute is interfering with History's cell background, navigation could briefly lose the correct token value.Affected file:
app/src/components/History.jsx— specifically theMonthGridrendering and any loading-skeleton containers that usevar(--surface-card).UI spec (Carbon g100)
MonthGridmust render with the correct dark background (var(--surface-card)=#18181b) from the very first paint on navigation — no white flash at any point.Acceptance criteria
npm test)Out of scope