fix(ui): use LoadingState/ErrorState in NotificationReadinessCard

[galuis116]

Summary

• NotificationReadinessCard (apps/loopover-ui/src/components/site/notification-readiness-card.tsx) collapsed its loading and error states into one plain-text branch ("Loading notification model..." vs "Notification model unavailable."), discarding the error/errorKind fields useApiResource already exposes and giving no retry action -- a real fetch failure and "still loading" rendered identical generic copy, unlike every other useApiResource consumer in this app.
• Replaced the collapsed branch with the shared LoadingState/ErrorState from state-views.tsx, wiring through the real error message, errorKind, and a retry action (onRetry={model.reload}). The success-path rendering (the privacyGuards list, opt-in controls) is unchanged.
• Added notification-readiness-card.test.tsx covering all three render paths: loading, error (with the real message + working retry), the network-specific error copy, and success.

Scope

• The PR title follows type(scope): short summary Conventional Commit format.
• This PR is focused and does not mix unrelated backend, UI, MCP, docs, dependency, and deploy changes.
• This follows CONTRIBUTING.md and does not reintroduce GitHub Pages, VitePress, site/, or CNAME.
• I linked a currently open issue this PR resolves.

Closes #6985

Validation

• git diff --check
• npm run actionlint (no workflow changes in this PR)
• npm run typecheck (via npm run ui:typecheck, the UI-scoped equivalent)
• npm run test:coverage (backend-only; this PR only touches apps/loopover-ui, which is outside the Codecov patch gate per codecov.yml's ignore: apps/**)
• npm run test:workers (not applicable to this UI-only change)
• npm run build:mcp (not applicable to this UI-only change)
• npm run test:mcp-pack (not applicable to this UI-only change)
• npm run ui:openapi:check (no API/schema changes in this PR)
• npm run ui:lint
• npm run ui:typecheck
• npm run ui:build
• npm audit --audit-level=moderate (no dependency changes in this PR)
• New or changed behavior has unit/integration tests for new branches, fallback paths, and sanitizer boundaries

If any required check was skipped, explain why:

• This PR only touches apps/loopover-ui/src/components/site/notification-readiness-card.tsx (plus its new test file). The backend-only checks above have no surface to exercise for a change scoped entirely to one UI component's loading/error branches; npm run ui:lint, npm run ui:typecheck, and npm run ui:build all pass locally, and the new test suite (4 tests) covers the loading, error (both generic and network-specific copy), and success render paths, including the retry action.

Safety

• No secrets, wallet details, hotkeys, coldkeys, user PATs, private keys, raw trust scores, private rankings, or private maintainer evidence are exposed.
• Public GitHub text stays sanitized, low-noise, and does not imply compensation guarantees or optimization tactics.
• Auth, cookie, CORS, GitHub App, Cloudflare, or session changes include negative-path tests. (N/A -- no auth/cookie/CORS/session changes in this PR.)
• API/OpenAPI/MCP behavior is updated and tested where needed. (N/A -- no API/OpenAPI/MCP changes in this PR.)
• UI changes use live API data or real empty/error/loading states, not production mock/demo fallbacks.
• Visible UI changes include a UI Evidence section below with JPG/JPEG or PNG screenshots arranged as organized, captioned, clickable thumbnails. SVG screenshots are not used as review evidence. Review-only screenshots or recordings are not committed to the repository.
• Public docs/changelogs are updated where needed; changelogs are only edited for release-prep PRs.

UI Evidence

State / title	JPG/PNG evidence
Before (collapsed loading/error)
After: Loading state
After: Error state (real message + retry)

Notes

[superagent-security]

Superagent didn't find any vulnerabilities or security issues in this PR.

[loopover-orb]

Tip

✅ LoopOver review result - approve/merge recommended

_{Review updated: 2026-07-17 19:32:51 UTC}

2 files · 1 AI reviewer · no blockers · readiness 83/100 · CI green · clean

✅ Suggested Action - Approve/Merge

• safe to merge

Review summary
This PR replaces a collapsed loading/error text branch in NotificationReadinessCard with the shared LoadingState/ErrorState components, wiring through the real error message, errorKind, and a retry action via model.reload. The change is small, well-targeted, matches the linked issue #6985, and includes tests covering loading, error (generic and network-specific), and success paths. The success-path rendering is untouched, and CI passed on this commit.

Nits — 4 non-blocking

• notification-readiness-card.tsx: no fallback is provided if model.error is undefined/empty on an error status, though ErrorState presumably handles that internally — worth confirming ErrorState degrades gracefully to a generic message in that case.
• The test mocks useApiResource entirely, so it verifies wiring/rendering logic but not that useApiResource itself ever produces this exact shape (status/error/errorKind/reload) — reasonable for a unit test but worth a brief mention in the PR description.
• Consider adding a snapshot or explicit assertion that ErrorState/LoadingState receive the right props (already implicitly covered via rendered text, so this is optional).
• If ErrorState has other supported errorKind values (e.g., 'auth', 'timeout'), it may be worth a quick note confirming they're all exercised elsewhere in the app's test suite, not necessarily here.

Decision drivers

• ✅ Code review — No blockers (1 reviewer)
• ✅ Gate result — Passing (No configured blocker found.)

Context & advisory signals — never blocks the verdict

Signal	Result	Evidence
Linked issue	✅ Linked	#6985
Related work	✅ No active overlap found	No same-issue or scoped active PR overlap found.
Change scope	❌ 8/20	High review scope from cached public metadata (1 linked issue).
Validation posture	✅ 25/25	PR body includes validation/test evidence.
Contributor workload	✅ 10/10	Author activity: 1962 registered-repo PR(s), 1288 merged, 52 issue(s).
Contributor context	✅ Confirmed Gittensor contributor	galuis116; Gittensor profile; 1962 PR(s), 52 issue(s).
Improvement	✅ Minor	risk: clean · value: minor · LLM: moderate

Linked issue satisfaction

Addressed
The diff replaces the collapsed plain-text branch with LoadingState for loading and ErrorState (wired with model.error, model.errorKind, and onRetry) for the error case, preserving the success-path privacyGuards rendering, and adds a test file covering loading, error (including network-kind), and success paths.

Review context

• Author: galuis116
• Role context: outside_contributor
• Public audience mode: oss maintainer
• Lane context: Repository is configured for direct PR review.
• Public profile languages: JavaScript, Python, Dart, TypeScript, HTML, MDX, Rust, C++
• Official Gittensor activity: 1962 PR(s), 52 issue(s).
• PR-specific overlap: none found.

Contributor next steps

• Start here: Add a concise scope and risk note.
• Then work through the remaining 2 steps in the Signals table above.

Signal definitions

• Related work = same linked issue, overlapping active PRs, or title/path similarity.
• Change scope = cached public metadata such as size labels, draft state, and review-burden hints.
• Validation posture = whether the PR provides enough public validation/test evidence for maintainer review.
• Contributor workload = public contributor activity and cleanup pressure, not a repo-wide quality failure.
• Contributor context = public GitHub/Gittensor identity context; non-Gittensor status is not a blocker.

🧪 Chat with LoopOver

Ask LoopOver a question about this PR directly in a comment — grounded only in the same cached, public-safe facts shown above, never a new claim.

• @loopover ask <question> answers contribution-quality Q&A with source citations and freshness.
• @loopover chat <question> answers in natural prose from cached decision-pack facts via local inference (maintainer/collaborator; read-only).
• A plain-language @loopover mention with a real question is routed to the closest matching read-only command automatically — no exact syntax required.

Full command reference: https://loopover.ai/docs/loopover-commands

🧪 Experimental — new and may change.

Visual preview

Route	Viewport	Before (production)	After (this PR's preview)	Diff
/	desktop	before /	after /	—
/	mobile	before / (mobile)	after / (mobile)	—

Click any thumbnail to open the full-size screenshot. Before = production · After = this PR's preview deploy.

_{🟩 Safe / merged · 🟦 Advisory · 🟨 Held for review · 🟥 Blocked / closed}

---

💰 Earn for open-source contributions like this. Gittensor lets GitHub contributors earn for the work they already do — register to start earning →.

Checked by LoopOver, a quiet PR intelligence layer for OSS maintainers.

• Re-run LoopOver review

[loopover-orb]

LoopOver approves — the gate is satisfied and CI is green.