Skip to content

Add error.tsx and loading.tsx pages for improved UX #40

@lak7

Description

@lak7

Description

Add Next.js App Router error.tsx and loading.tsx files to key route segments for better user experience during navigation and error scenarios.

Current Behavior

  • No custom error boundaries exist - users see default Next.js error pages
  • No loading states during route transitions - content appears abruptly
  • Poor UX when API calls fail or routes take time to load

Expected Behavior

  • Graceful error pages that match DevilDev's design aesthetic
  • Skeleton loaders or spinners during page transitions
  • Users can recover from errors without manually refreshing

Routes to Cover

Priority routes:

  • src/app/error.tsx (root error boundary)
  • src/app/loading.tsx (root loading state)
  • src/app/project/error.tsx
  • src/app/project/loading.tsx
  • src/app/project/[projectId]/error.tsx
  • src/app/project/[projectId]/loading.tsx

Optional/bonus:

  • src/app/pricing/loading.tsx
  • src/app/settings/loading.tsx
  • src/app/not-found.tsx (custom 404)

Helpful Resources

Metadata

Metadata

Labels

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions