perf: smooth route loading and navigation

e2e/admin-announcements.spec.ts

@@ -1,4 +1,4 @@
-import { expect, test } from '@playwright/test';
+import { expect, test, type Page } from '@playwright/test';
 import { stubSupabaseSession } from './helpers/auth';
 
 const ANNOUNCEMENT_ID = 'aaaaaaaa-bbbb-4ccc-8ddd-eeeeeeeeeeee';
@@ -14,6 +14,29 @@ test.beforeEach(async ({ page }) => {
   });
 });
 
+async function openAppNav(page: Page, label: string) {
+  if ((page.viewportSize()?.width ?? 1280) < 1024) {
+    await page.getByRole('button', { name: 'Open menu' }).click();
+    await page.getByRole('navigation', { name: 'Mobile navigation' })
+      .getByRole('link', { name: new RegExp(`^${label}`) })
+      .click();
+    return;
+  }
+
+  await page.getByRole('navigation', { name: 'Main navigation' })
+    .getByRole('link', { name: label })
+    .click();
+}
+
+function countAnnouncementListRequests(page: Page) {
+  let count = 0;
+  page.on('request', (request) => {
+    const url = new URL(request.url());
+    if (request.method() === 'GET' && url.pathname.endsWith('/functions/v1/announcements')) count += 1;
+  });
+  return () => count;
+}
+
 test('user sees and permanently dismisses an active announcement', async ({ page }) => {
   let dismissBody: Record<string, unknown> | null = null;
   await page.route('**/functions/v1/announcements*', async (route) => {
@@ -48,6 +71,59 @@ test('user sees and permanently dismisses an active announcement', async ({ page
   expect(dismissBody).toEqual({ announcementId: ANNOUNCEMENT_ID });
 });
 
+test('keeps announcements stable across routes and refreshes on a full reload', async ({ page }) => {
+  // The auth session is a browser-only stub. This verifies client request sequencing, not backend auth.
+  const listRequestCount = countAnnouncementListRequests(page);
+  let listResponseCount = 0;
+  await page.route('**/functions/v1/announcements*', async (route) => {
+    if (route.request().method() !== 'GET') {
+      await route.fulfill({ json: { success: true } });
+      return;
+    }
+
+    listResponseCount += 1;
+    const current = listResponseCount === 1
+      ? {
+        id: ANNOUNCEMENT_ID,
+        title: 'Scheduled maintenance',
+        body: 'DebateLab will be unavailable for ten minutes.',
+        starts_at: '2026-08-31T12:00:00.000Z',
+        expires_at: null,
+        created_at: '2026-08-31T11:00:00.000Z',
+      }
+      : {
+        id: 'bbbbbbbb-cccc-4ddd-8eee-ffffffffffff',
+        title: 'Current announcement',
+        body: 'This message is current after refresh.',
+        starts_at: '2026-08-31T12:00:00.000Z',
+        expires_at: null,
+        created_at: '2026-08-31T11:00:00.000Z',
+      };
+    await route.fulfill({ json: { announcements: [current] } });
+  });
+
+  await page.goto('/app/generate');
+  await expect(page.getByRole('heading', { name: 'Generate', exact: true })).toBeVisible();
+  await expect(page.getByRole('heading', { name: 'Scheduled maintenance' })).toBeVisible();
+  expect(listRequestCount()).toBe(1);
+
+  await page.getByRole('button', { name: 'Dismiss announcement: Scheduled maintenance' }).click();
+  await expect(page.getByRole('heading', { name: 'Scheduled maintenance' })).toHaveCount(0);
+
+  await openAppNav(page, 'Attack');
+  await expect(page.getByRole('heading', { name: 'Attack', exact: true })).toBeVisible();
+  await openAppNav(page, 'Home');
+  await expect(page.getByRole('main').getByRole('heading', { name: 'DebateLab', exact: true })).toBeVisible();
+  expect(listRequestCount()).toBe(1);
+  expect(listResponseCount).toBe(1);
+  await expect(page.getByRole('heading', { name: 'Scheduled maintenance' })).toHaveCount(0);
+
+  await page.reload();
+  await expect(page.getByRole('heading', { name: 'Current announcement' })).toBeVisible();
+  await expect.poll(() => listRequestCount()).toBe(2);
+  expect(listResponseCount).toBe(2);
+});
+
 test('admin can deactivate without losing history, then explicitly delete', async ({ page }) => {
   let createBody: Record<string, unknown> | null = null;
   let deactivateBody: Record<string, unknown> | null = null;

e2e/animation-polish.spec.ts

@@ -85,6 +85,42 @@ test('removes non-essential route and state movement for reduced motion', async
   await page.screenshot({ path: testInfo.outputPath('reduced-result.png'), fullPage: true });
 });
 
+test('keeps a delayed route skeleton static under reduced motion', async ({ page }, testInfo) => {
+  await prepareMotionFixture(page, 'reduce');
+  await page.goto('/app/generate', { waitUntil: 'domcontentloaded' });
+  await expect(page.getByRole('heading', { name: 'Generate', exact: true })).toBeVisible({ timeout: STATE_TIMEOUT_MS });
+  await page.screenshot({ path: testInfo.outputPath('reduced-route-before.png'), fullPage: true });
+
+  let destinationRequested = false;
+  await page.route('**/src/pages/AttackPage.tsx*', async (route) => {
+    destinationRequested = true;
+    await new Promise((resolve) => setTimeout(resolve, 1500));
+    await route.continue();
+  });
+
+  const attackLink = (page.viewportSize()?.width ?? 1280) < 1024
+    ? await (async () => {
+      await page.getByRole('button', { name: 'Open menu' }).click();
+      return page.getByRole('navigation', { name: 'Mobile navigation' }).getByRole('link', { name: /^Attack/ });
+    })()
+    : page.getByRole('navigation', { name: 'Main navigation' }).getByRole('link', { name: 'Attack' });
+  await attackLink.click();
+  await expect.poll(() => destinationRequested).toBe(true);
+
+  const pendingStatus = page.getByRole('status', { name: 'Opening Attack', exact: true });
+  const pendingSkeleton = page.locator('[data-route-skeleton="tool-form"][aria-busy="true"]');
+  await expect(pendingStatus).toHaveCount(1);
+  await expect(pendingStatus).toHaveAttribute('aria-live', 'polite');
+  await expect(pendingStatus).toHaveText('Opening Attack');
+  await expect(pendingSkeleton).toBeVisible();
+  await expect(page.locator('.motion-loading-shell')).toHaveCount(0);
+  await expect.poll(() => page.evaluate(() => document.getAnimations().filter((animation) => animation.playState === 'running').length)).toBe(0);
+  await page.screenshot({ path: testInfo.outputPath('reduced-route-pending.png'), fullPage: true });
+
+  await expect(page.getByRole('heading', { name: 'Attack', exact: true })).toBeVisible({ timeout: STATE_TIMEOUT_MS });
+  await page.screenshot({ path: testInfo.outputPath('reduced-route-ready.png'), fullPage: true });
+});
+
 test('audits applicable empty, loading, result, and option states across feature routes', async ({ page }, testInfo) => {
   test.setTimeout(90_000);
   await prepareMotionFixture(page, 'no-preference');

e2e/home-navigation.spec.ts

@@ -58,6 +58,65 @@ test('onboarding follows visible home targets when secondary navigation is close
   await page.locator('[data-test-id="button-skip"]').click();
 });
 
+test('onboarding keeps its original start schedule after a delayed lazy chunk', async ({ page }) => {
+  await page.addInitScript(() => {
+    const originalSetItem = Storage.prototype.setItem;
+    Storage.prototype.setItem = function setItem(key, value) {
+      if (key === 'debate-trainer-onboarding') {
+        try {
+          if (JSON.parse(value).state?.isTourRunning === true) {
+            originalSetItem.call(this, '__onboarding-tour-started-at', String(Date.now()));
+          }
+        } catch {
+          // Ignore malformed test-only storage writes.
+        }
+      }
+      originalSetItem.call(this, key, value);
+    };
+    window.localStorage.setItem('debate-trainer-onboarding', JSON.stringify({
+      state: { hasCompletedOnboarding: false, isTourRunning: false },
+      version: 0,
+    }));
+  });
+  await page.route('**/src/components/features/onboarding/OnboardingTour.tsx*', async (route) => {
+    const response = await route.fetch();
+    const body = `${await response.text()}\nwindow.localStorage.setItem('__onboarding-module-evaluated-at', String(Date.now()));`;
+    await new Promise((resolve) => setTimeout(resolve, 750));
+    await route.fulfill({ response, body });
+  });
+  await page.route('**/node_modules/.vite/deps/react-joyride.js*', async (route) => {
+    const response = await route.fetch();
+    const body = await response.body();
+    await route.fulfill({ response, body });
+  });
+
+  await page.goto('/app', { waitUntil: 'domcontentloaded' });
+
+  await expect.poll(async () => Number(await page.evaluate(() => window.localStorage.getItem('__onboarding-module-evaluated-at') ?? 0)), { timeout: 15_000 }).toBeGreaterThan(0);
+  await expect.poll(async () => Number(await page.evaluate(() => window.localStorage.getItem('__onboarding-tour-started-at') ?? 0)), { timeout: 15_000 }).toBeGreaterThan(0);
+  const moduleEvaluatedAt = await page.evaluate(() => Number(window.localStorage.getItem('__onboarding-module-evaluated-at')));
+  const startedAt = await page.evaluate(() => Number(window.localStorage.getItem('__onboarding-tour-started-at')));
+  expect(startedAt - moduleEvaluatedAt).toBeLessThan(450);
+  await expect(page.locator('.react-joyride__tooltip')).toBeVisible({ timeout: 15_000 });
+});
+
+test('onboarding starts a fresh delay when a protected route reaches home', async ({ page }) => {
+  await page.addInitScript(() => {
+    window.localStorage.setItem('debate-trainer-onboarding', JSON.stringify({
+      state: { hasCompletedOnboarding: false, isTourRunning: false },
+      version: 0,
+    }));
+  });
+  await page.goto('/app/generate', { waitUntil: 'domcontentloaded' });
+  await expect(page.getByRole('heading', { name: 'Ready to Generate' })).toBeVisible({ timeout: 15_000 });
+  await page.waitForTimeout(650);
+
+  await page.locator('header a[href="/app"]').first().click();
+  await expect(page).toHaveURL(/\/app$/);
+  await expect(page.locator('.react-joyride__tooltip')).toHaveCount(0, { timeout: 100 });
+  await expect(page.locator('.react-joyride__tooltip')).toBeVisible({ timeout: 15_000 });
+});
+
 test('header keeps the brand and controls inside a 320px viewport', async ({ page }) => {
   await page.setViewportSize({ width: 320, height: 844 });
   await page.goto('/app', { waitUntil: 'domcontentloaded' });