diff --git a/frontend/src/views/Dashboard.vue b/frontend/src/views/Dashboard.vue
index 22fac07e5..09404d738 100644
--- a/frontend/src/views/Dashboard.vue
+++ b/frontend/src/views/Dashboard.vue
@@ -21,11 +21,13 @@
       >Usage</a>
     </div>
 
-    <!-- Usage view: lazy-mounted on first switch so the chart bundle and the
-         usage fetch don't block Dashboard first paint (SC-004). Kept alive with
-         v-show after mount so re-switching is instant. -->
-    <div v-if="usageEverActive" v-show="activeView === 'usage'" data-test="dashboard-usage-panel">
-      <Suspense>
+    <!-- Usage view: the panel wrapper is always in the DOM (kept hidden with
+         v-show so switching back is instant and the Overview subtree is never
+         torn down, SC-006). The heavy chart bundle + the usage fetch inside
+         UsageView are lazy-mounted only on first switch (v-if="usageEverActive")
+         so they never block Dashboard first paint (SC-004). -->
+    <div v-show="activeView === 'usage'" data-test="dashboard-usage-panel">
+      <Suspense v-if="usageEverActive">
         <UsageView />
         <template #fallback>
           <div class="flex justify-center py-16"><span class="loading loading-spinner loading-lg"></span></div>
diff --git a/frontend/tests/unit/dashboard-usage-switcher.spec.ts b/frontend/tests/unit/dashboard-usage-switcher.spec.ts
index d0d033d6d..d90707c93 100644
--- a/frontend/tests/unit/dashboard-usage-switcher.spec.ts
+++ b/frontend/tests/unit/dashboard-usage-switcher.spec.ts
@@ -58,6 +58,13 @@ vi.mock('@/composables/useSecurityScannerStatus', () => ({
 }))
 
 import Dashboard from '@/views/Dashboard.vue'
+// Dashboard imports Usage.vue lazily via defineAsyncComponent so the chart
+// bundle stays out of first paint (SC-004). A dynamic import() never settles
+// inside flushPromises (microtask-only) + Suspense, so the lazy panel would be
+// stuck on its fallback spinner under test. Import the real Usage.vue eagerly
+// here and swap it in as a synchronous stub for the async wrapper — this
+// exercises the genuine Usage.vue switcher/fetch logic without the async race.
+import UsageView from '@/views/Usage.vue'
 
 // jsdom has no EventSource; the system store opens one on mount.
 class FakeEventSource {
@@ -71,7 +78,17 @@ function mountDashboard() {
   return shallowMount(Dashboard, {
     global: {
       plugins: [createPinia()],
-      stubs: { RouterLink: { template: '<a><slot /></a>' } },
+      stubs: {
+        RouterLink: { template: '<a><slot /></a>' },
+        // Un-stub the <Suspense> wrapper that shallowMount would otherwise
+        // replace with a stub (which swallows its children), and swap the lazy
+        // async UsageView for the eagerly-imported real Usage.vue so the
+        // switcher's fetch-on-activation + window-re-fetch logic actually runs.
+        // Usage.vue's heavy chart grandchildren (CallHistogram/Bar etc.) stay
+        // shallow-stubbed and never reach jsdom's missing canvas.
+        Suspense: false,
+        UsageView,
+      },
     },
   })
 }