Skip to content

feat(app): loading, error and not-found states for the user-facing routes - #47

Open
jdjioe5-cpu wants to merge 1 commit into
Kinlock-Org:mainfrom
jdjioe5-cpu:feat/route-loading-error-states
Open

jdjioe5-cpu wants to merge 1 commit into
Kinlock-Org:mainfrom
jdjioe5-cpu:feat/route-loading-error-states

Conversation

@jdjioe5-cpu

Copy link
Copy Markdown

Summary

Closes #37. Fulfills Roadmap row M3-27 (Phase 4, M3 App, Priority P1).

This PR introduces route-level designed states across user-facing routes:

  • Shared Primitives: Implemented Spinner and StatePanel in components/ui/ with role="status"|"alert"|"region", accessibility attributes, and motion-safe:animate-spin respecting prefers-reduced-motion.
  • Loading States: Added root app/loading.tsx as well as route-specific loading states for app/locks/loading.tsx ("Reading the lock from the network…") and app/payee/loading.tsx ("Checking verified payees…").
  • Error State: Added app/error.tsx client component with autofocus on the retry action, maintaining reset() behavior, with zero technical traces or stack leaks in the UI.
  • Not-Found State: Added app/not-found.tsx with honest wording distinguishing between local absence and indexer lag.
  • Strings & Roadmap: All new strings externalized to messages/en.json. Marked M3-27 as DONE in ROADMAP.md with Changelog entry.

Hard Rules / Invariants Touched

  • Hard Rule 5: Fragment privacy preserved. app/claim/** is untouched; error.tsx never logs, exposes or references claim-link fragments or addresses.
  • Hard Rule 7: Honest wording. not-found.tsx explicitly notes indexer propagation delay rather than claiming on-chain absence.
  • AGENTS.md §8.3: Mobile-first and slow connection friendly; zero inline text in JSX (verified by lib/i18n/inline-strings.test.ts).

Verification & Commands Executed

Real command outputs executed locally:

$ pnpm lint
> biome check .
Checked 91 files in 20ms. No fixes applied.

$ pnpm typecheck
> tsc --noEmit
(exit 0, 0 errors)

$ pnpm test
> vitest run
 Test Files  16 passed (16)
      Tests  186 passed (186)
   Start at  18:48:24
   Duration  728ms

$ pnpm build
> next build
▲ Next.js 16.3.8 (Turbopack)
✓ Running next.config.ts took 19ms
✓ Compiled successfully in 462ms
✓ Generating static pages using 14 workers (6/6) in 429ms
Route (app)
├ ○ /_not-found
├ ƒ /locks/[id]
├ ƒ /payee
...

- Closes Kinlock-Org#37 (Roadmap row M3-27)
- Introduce shared Spinner and StatePanel primitives in components/ui/ with motion-safe animations and accessibility roles
- Implement root app/loading.tsx and route-specific loading states for /locks and /payee with contextual plain-language descriptions
- Implement app/error.tsx with retry button, autofocus for keyboard/screen-readers, zero technical trace exposure, and strict fragment privacy (Hard Rule 5; app/claim untouched)
- Implement honest app/not-found.tsx acknowledging potential indexer lag without asserting on-chain absence (Hard Rule 7)
- Externalize all strings to messages/en.json (M3-23)
- Add unit tests in components/ui/state.test.ts (186/186 tests passing)
- Update ROADMAP.md marking M3-27 as DONE with Changelog entry
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add loading, error and not-found states for the user-facing routes

2 participants