fix(settings): add loading.tsx skeleton to prevent blank flash on navigation

[dccakes]

Daily Product Improvement

📝 TLDR

Add a loading.tsx skeleton to the settings route — the only authenticated route that was missing one.

📝 Description

The settings page (/settings) was the only authenticated route without a companion loading.tsx file. During the server-side data fetch (api.wedding.getDetails(), getRequiredWedding()), users saw a completely blank content area instead of a meaningful placeholder — inconsistent with every other route in the app (budget, checklist, dashboard, events, guest-list, vendors, website all have companion skeletons).

This Change

• Adds src/app/(authenicated)/settings/loading.tsx matching the shape and spacing of the live settings page
• Skeleton mirrors the four sections: Wedding Details form, Plugins card, Organization Members cards, Connected Apps card
• Uses Skeleton from the shared UI library, consistent with all other route-level loading files
• No existing behaviour changed; no other files touched

🧪 Testing

• Ran full test suite (2080 tests, all passing)
• Biome lint passes with no errors
• TypeScript compiler reports no new errors
• Manually reviewed skeleton layout against the real settings page

🧪 How to test as a user

Navigate to /settings on a slow connection (or throttle in DevTools). You should now see a structured skeleton matching the page layout instead of a blank white area while the server fetch resolves.

📚 Documentation

• No documentation changes needed

🎨 Style and code quality

• Ran biome check on the new file — no errors

📦 Dependencies

• No new dependencies

🚦 Ready for review

• Attached description of manual verification above
• PR checklist complete

---

Recommendations Reviewed

Area: Settings route
Issue: No loading.tsx — blank flash on every navigation
Recommendation: Add a skeleton matching the four settings sections
Type: UX
Priority: Medium
Effort: Small
→ Selected for this PR

---

Area: src/components/forms/guest/gift-section.tsx
Issue: Uses raw border-red-500 / text-red-600 / border-gray-300 instead of design tokens; raw <input> instead of <Input>/<Checkbox>; sharedStyles mixing
Recommendation: Replace with border-destructive, text-destructive, border-border; use design-system components
Type: Frontend cleanup
Priority: Medium
Effort: Small

---

Area: src/components/forms/rsvp-form-settings.tsx line 50
Issue: Fixed w-[800px] breaks on viewports narrower than 800 px
Recommendation: Replace with w-full max-w-[800px]
Type: UX
Priority: High
Effort: Small

---

Area: src/components/forms/dashboard-settings-form.tsx
Issue: appearInSearchEngines toggle is local state only — no mutation is called, change is lost on unmount; description labels are also inverted
Recommendation: Wire toggle to backend mutation or remove it until the endpoint exists; fix label inversion
Type: Product flow
Priority: High
Effort: Medium

---

Area: src/components/guest-list/v2/list/guest-cards-list.tsx
Issue: Empty state is a bare <Card> with a single text line — no icon, no AsyncState design-system treatment
Recommendation: Replace with <AsyncState isEmpty emptyText='…' />
Type: UX
Priority: Low
Effort: Small

---

Area: src/components/vendor/vendor-category-section.tsx
Issue: vendors.length === 0 branch is dead code — parent filters to populated categories before rendering
Recommendation: Remove the unreachable branch
Type: Frontend cleanup
Priority: Low
Effort: Small

---

Area: src/components/guest-list/guests-view.tsx + src/components/forms/guest-form.tsx
Issue: Discard-unsaved-changes and delete-party dialogs are duplicated across both files with near-identical markup
Recommendation: Extract to shared <DiscardChangesDialog> and <DeletePartyDialog> components
Type: Frontend cleanup
Priority: Medium
Effort: Large

Future Recommendations

Recommendation: Fix non-functional SEO visibility toggle in dashboard-settings-form.tsx
Priority: High
Effort: Medium
Reason not included: Requires investigating the intended backend endpoint before any fix is safe; touching a non-functional control without knowing the full intent risks introducing a worse bug
Should become GitHub issue: Yes

Recommendation: Fix w-[800px] mobile overflow in rsvp-form-settings.tsx
Priority: High
Effort: Small
Reason not included: Selecting one targeted improvement per daily run
Should become GitHub issue: No (small enough for a follow-up daily run)

Recommendation: Replace raw Tailwind error colors in gift-section.tsx with design tokens
Priority: Medium
Effort: Small
Reason not included: Selecting one targeted improvement per daily run
Should become GitHub issue: No

Recommendation: Extract duplicated discard/delete dialogs in guest form files
Priority: Medium
Effort: Large
Reason not included: Large refactor touching core guest-list flow — too risky for a single daily run
Should become GitHub issue: Yes

GitHub Issues Created or Proposed

No issues created this run. Two candidates identified above for future tracking (non-functional SEO toggle, duplicated dialog extraction). Both will be proposed in a follow-up if not captured by an open issue.

---

🤖 Generated with Claude Code

https://claude.ai/code/session_01MqwWGko8JFH2b2vDZ3faiV

---

Generated by Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
scv	Error		Sep 7, 2026 2:19pm UTC

[github-actions]

Jest Test Coverage

Coverage Summary

Lines	Statements	Branches	Functions
	83.11% (36264/43629)	82.14% (3813/4642)	69.49% (1073/1544)