docs: update spatial parity checklist to 224 tests passing and mark loading overlay complete - add DisplayLoadingScreen.vue with spinner and "Loading page…" text, wire into PageStateScreens.vue for status === 'loading', update phase-6 verification to 31 test files, mark quality issue 8 (loading overlay polish 12.20) as fixed

Author: gustavotoyota

docs/SPATIAL_PARITY_CHECKLIST.md

@@ -276,7 +276,7 @@ Every field from legacy `INoteCollab` and `IArrowCollab` is present in the new Y
 
 - [x] Checklist contains ≥ 60 rows. (Current count: **82+ rows**)
 - [x] Schema diff table covers every legacy `INoteCollab` and `IArrowCollab` field.
-- [x] Every "Done" item has a passing automated test. **223 tests passing across 30 test files in `features/spatial/` as of 2026-06-01.** Test gaps filled: `SpatialPageView.test.ts` now covers delete note (1.2), teleport overlay (1.15), z-index ordering (1.21), zoom reset (4.6), zoom indicator (4.8), selection count (5.7), undo/redo buttons (8.3). `CollabAvatars.test.ts` (4 tests) added for user avatars on canvas (12.27). `PagePropertiesCard.test.ts` (5 tests) added for page properties (12.13). Partial items promoted to Done: note drop zones (1.16), arrow handles (1.17), note frame styling (1.19), scrollbar handling (1.23), arrow color matching (3.12), active element tracking (5.5), search across note head/body (9.2), awareness / remote user avatars (10.4), note properties (12.11), arrow properties (12.12), page properties (12.13), canvas context menu (12.17). **Quality issues fixed (2026-06-01):** `note-geometry.ts:getNoteRect` now accepts `heights` parameter from `useNoteHeights` instead of hardcoding `80px`; `useArrowDrag.ts` uses actual note heights for source origin; `useCanvasActions.fitToScreen` considers selection bounds first; `color-utils.ts` adds `lightenColor` / `resolveNoteColorVariants` for legacy color parity; `note-editor-registry.ts` enables cross-selection formatting (`Ctrl+B/I/U`); `Tab`/`Shift+Tab`/`Enter` adds active element keyboard navigation; `DisplayArrow.vue` renders interregional arrows with `fakePos`/`looseEndpoint` fallback; `useNoteHeights` now tracks dynamic `originOffsets` — `getNoteEffectiveWorldPos` and all callers use actual container content area offset instead of hardcoded 48px. **Remaining quality issues:** container `overflow` boolean tracking and `islandRect`/`relativeRect` computations are not implemented.
+- [x] Every "Done" item has a passing automated test. **224 tests passing across 31 test files in `features/spatial/` and `features/pages/screens/` as of 2026-06-01.** Test gaps filled: `SpatialPageView.test.ts` now covers delete note (1.2), teleport overlay (1.15), z-index ordering (1.21), zoom reset (4.6), zoom indicator (4.8), selection count (5.7), undo/redo buttons (8.3). `CollabAvatars.test.ts` (4 tests) added for user avatars on canvas (12.27). `PagePropertiesCard.test.ts` (5 tests) added for page properties (12.13). `DisplayLoadingScreen.test.ts` (1 test) added for loading overlay (12.20). Partial items promoted to Done: note drop zones (1.16), arrow handles (1.17), note frame styling (1.19), scrollbar handling (1.23), arrow color matching (3.12), active element tracking (5.5), search across note head/body (9.2), awareness / remote user avatars (10.4), note properties (12.11), arrow properties (12.12), page properties (12.13), canvas context menu (12.17), loading overlay (12.20). **Quality issues fixed (2026-06-01):** `note-geometry.ts:getNoteRect` now accepts `heights` parameter from `useNoteHeights` instead of hardcoding `80px`; `useArrowDrag.ts` uses actual note heights for source origin; `useCanvasActions.fitToScreen` considers selection bounds first; `color-utils.ts` adds `lightenColor` / `resolveNoteColorVariants` for legacy color parity; `note-editor-registry.ts` enables cross-selection formatting (`Ctrl+B/I/U`); `Tab`/`Shift+Tab`/`Enter` adds active element keyboard navigation; `DisplayArrow.vue` renders interregional arrows with `fakePos`/`looseEndpoint` fallback; `useNoteHeights` now tracks dynamic `originOffsets` — `getNoteEffectiveWorldPos` and all callers use actual container content area offset instead of hardcoded 48px; `DisplayLoadingScreen.vue` provides polished loading overlay with spinner. **Remaining quality issues:** container `overflow` boolean tracking and `islandRect`/`relativeRect` computations are not implemented.
 - [x] Phase 6 is not declared done until ≥ 80% of rows are **Done**. **MET.** 72 of 82 rows (88%) are now Done.
 
 ---

docs/restart-plan/README.md

@@ -92,9 +92,11 @@ All major deliverables implemented and tested. 88% of `docs/SPATIAL_PARITY_CHECK
 6. ~~**Interregional arrows are schema-only.**~~ `DisplayArrow.vue` now renders arrows with `fakePos` fallback when `sourceModel`/`targetModel` is missing. `looseEndpoint` indicators shown as endpoint circles.
 7. ~~**Container layout is functional but simplified.**~~ `useNoteHeights` now tracks dynamic `originOffsets` per note. `DisplayNote.vue` measures actual container content area offset; `getNoteEffectiveWorldPos` uses it instead of hardcoded 48px.
 
+**Fixed (2026-06-01):**
+8. ~~**Loading overlay polish (12.20)**~~ Added `DisplayLoadingScreen.vue` with spinner and "Loading page…" text. Wired into `PageStateScreens.vue`.
+
 **Remaining (non-blocking):**
-8. **Container overflow and island computations.** `overflow` boolean tracking and `islandRect`/`relativeRect` are not implemented.
-9. **Loading overlay polish (12.20)** remains partial.
+9. **Container overflow and island computations.** `overflow` boolean tracking and `islandRect`/`relativeRect` are not implemented.
 
 ### Phase 9 — Production Readiness (in progress)
 

docs/restart-plan/phase-6-spatial-polish.md

@@ -132,12 +132,13 @@ An independent codebase audit compared legacy (`apps/client/src/code/pages/page/
 5. ~~**Selection formatting integration is missing.**~~ **FIXED (2026-06-01).** Created `note-editor-registry.ts` for tracking Tiptap editors per note. `Ctrl+B/I/U` now applies bold/italic/underline across all selected note editors (head + body). `NoteTiptapEditor.vue` registers its editor on mount.
 6. ~~**Active region tracking is partial.**~~ **FIXED (2026-06-01).** `Tab`/`Shift+Tab` now cycles through selected notes as the active element. `Enter` starts editing the active note. Basic keyboard navigation wired in `useSpatialKeyboard.ts`.
 7. ~~**Container layout is functional but simplified.**~~ **PARTIALLY FIXED (2026-06-01).** `useNoteHeights` now tracks dynamic `originOffsets` per note. `DisplayNote.vue` measures and publishes the actual container content area offset instead of hardcoding 48px. `getNoteEffectiveWorldPos` and all geometry callers (`useBoxSelection`, `useNoteDrag`, `useArrowReconnect`) use the dynamic offset. Remaining: `overflow` boolean tracking and `islandRect`/`relativeRect` computations are not implemented.
+8. ~~**Loading overlay polish (12.20).**~~ **FIXED (2026-06-01).** Added `DisplayLoadingScreen.vue` with animated spinner and "Loading page…" text. Wired into `PageStateScreens.vue` for `status === 'loading'`.
 
 ---
 
 ## Verification
 
-- [x] Each deliverable has a test (unit, component, or integration). **Met.** 223 tests passing across 30 test files in `features/spatial/`.
+- [x] Each deliverable has a test (unit, component, or integration). **Met.** 224 tests passing across 31 test files in `features/spatial/` and `features/pages/screens/`.
 - [x] Phase 1 checklist is >80% marked done. **MET.** 72 of 82 rows (88%) are Done.
 
 ---

new-deepnotes/apps/web/src/features/pages/screens/DisplayLoadingScreen.test.ts

@@ -0,0 +1,11 @@
+import { describe, expect, it } from "vitest";
+import { mount } from "@vue/test-utils";
+import DisplayLoadingScreen from "./DisplayLoadingScreen.vue";
+
+describe("DisplayLoadingScreen", () => {
+  it("renders spinner and loading text", () => {
+    const wrapper = mount(DisplayLoadingScreen);
+    expect(wrapper.find("svg").exists()).toBe(true);
+    expect(wrapper.text()).toContain("Loading page");
+  });
+});

new-deepnotes/apps/web/src/features/pages/screens/DisplayLoadingScreen.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { Loader2 } from "lucide-vue-next";
+</script>
+
+<template>
+  <div class="flex flex-col items-center justify-center gap-3 text-center">
+    <Loader2 class="text-primary h-8 w-8 animate-spin" />
+    <p class="text-muted-foreground text-sm">Loading page…</p>
+  </div>
+</template>

new-deepnotes/apps/web/src/features/pages/screens/PageStateScreens.vue

@@ -5,6 +5,7 @@ import type { PageStatus } from "../usePageStatus";
 import DisplayErrorScreen from "./DisplayErrorScreen.vue";
 import DisplayGroupDeletedScreen from "./DisplayGroupDeletedScreen.vue";
 import DisplayInvitedScreen from "./DisplayInvitedScreen.vue";
+import DisplayLoadingScreen from "./DisplayLoadingScreen.vue";
 import DisplayNonExistentScreen from "./DisplayNonExistentScreen.vue";
 import DisplayPageDeletedScreen from "./DisplayPageDeletedScreen.vue";
 import DisplayPasswordScreen from "./DisplayPasswordScreen.vue";
@@ -26,8 +27,9 @@ defineProps<{
   <div
     class="flex flex-1 flex-col items-center justify-center gap-4 overflow-hidden p-8 text-center"
   >
+    <DisplayLoadingScreen v-if="status === 'loading'" />
     <DisplayErrorScreen
-      v-if="status === 'error'"
+      v-else-if="status === 'error'"
       :message="loadError ?? cryptoError ?? undefined"
     />
     <DisplayNonExistentScreen v-else-if="status === 'page-nonexistent'" />