fix(web): keep the sidebar through route transitions; end them within 120 ms

Router updates now run in a React transition, so a route whose code is still loading keeps the current page up
and the view transition captures the new page with its sidebar (it used to drop out and pop back on the first
course-to-lesson visit). The root group's 250 ms UA morph is off: pointer input goes to the document while a
transition runs, so it stays as short as the old page's 120 ms fade. The pointer-events rule had no effect.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Lucas WintherandClaude Opus 5.5 committed 2026-10-30 21:24:43 +01:00
1 parent 57fe83f5de
commit 89ff72cc28
4 files changed
+38 -7

No files matched your search

+3 -2
View File
@@ -92,9 +92,10 @@ test("prefers-reduced-motion turns off every animation, transition and view tran
expect(block).toMatch(/\*::details-content\s*\{\s*transition:\s*none !important/);
});
test("view transitions never take pointer input and keep the header and sidebar still", () => {
test("view transitions are short and keep the header and sidebar still", () => {
const css = strip(tokensCss);
expect(css).toMatch(/::view-transition\s*\{[^}]*pointer-events:\s*none/);
// the UA default (a 250 ms root morph) would outlast the 220 ms ceiling
expect(css).toMatch(/::view-transition-group\(root\)\s*\{\s*animation:\s*none/);
expect(css).toMatch(/\.stc-top\s*\{[^}]*view-transition-name:\s*stc-top/);
expect(strip(learnerCss)).toMatch(/\.lr-side\s*\{[^}]*view-transition-name:\s*lr-side/);
expect(css).toMatch(/::view-transition-group\(stc-top\)[^{]*\{[^}]*animation:\s*none/);