TopherMayor/comparaison
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UX: Add proper loading and error states throughout #8

New Issue
Closed
opened 2026-04-26 08:15:04 +00:00 by TopherMayor · 0 comments
TopherMayor commented 2026-04-26 08:15:04 +00:00
Owner
Copy Link

Summary

Multiple pages lack proper loading/error handling. Add consistent patterns.

Issues to Fix

  1. Results page (results-client.tsx):

    • If comparison fails, show user-friendly error with retry button
    • "Research in progress" skeleton could show more detail

  2. Compare page (compare/page.tsx):

    • No error state shown when API fails
    • useComparisonStream has error state but the UI doesn't render it

  3. Global:

    • Add an error boundary component
    • Toast notifications for success/error actions (use sonner or similar)
    • Consistent skeleton loading patterns

Files

  • Modify: src/app/(main)/compare/page.tsx (render error state)
  • Modify: src/app/(main)/compare/[slug]/results-client.tsx (failed state)
  • Create: src/components/error-boundary.tsx
  • May need: npm install sonner for toast notifications

Acceptance Criteria

  • Compare page shows error when research fails
  • Results page handles failed status gracefully
  • Toast notifications for key actions
  • Error boundary catches render crashes
## Summary Multiple pages lack proper loading/error handling. Add consistent patterns. ## Issues to Fix 1. **Results page** (`results-client.tsx`): - If comparison fails, show user-friendly error with retry button - "Research in progress" skeleton could show more detail 2. **Compare page** (`compare/page.tsx`): - No error state shown when API fails - `useComparisonStream` has `error` state but the UI doesn't render it 3. **Global**: - Add an error boundary component - Toast notifications for success/error actions (use sonner or similar) - Consistent skeleton loading patterns ## Files - Modify: `src/app/(main)/compare/page.tsx` (render error state) - Modify: `src/app/(main)/compare/[slug]/results-client.tsx` (failed state) - Create: `src/components/error-boundary.tsx` - May need: `npm install sonner` for toast notifications ## Acceptance Criteria - [ ] Compare page shows error when research fails - [ ] Results page handles failed status gracefully - [ ] Toast notifications for key actions - [ ] Error boundary catches render crashes
TopherMayor added this to the v0.4 - Search & Polish milestone 2026-04-26 08:15:04 +00:00
TopherMayor added the improvementfrontend labels 2026-04-26 08:15:04 +00:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
backend
Server-side, API, database
 bug
Bugs and logic errors
 documentation
Docs, comments
 feature
New feature or enhancement
 frontend
UI/UX frontend work
 improvement
Code quality, refactoring
 testing
Test gaps, new tests
No Label frontend improvement
Milestone
No items
No Milestone v0.4 - Search & Polish
Projects
Clear projects
No project
Assignees
Clear assignees
TopherMayor
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: TopherMayor/comparaison#8
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?