Fix false 404/empty states when API fails

gandalf_automationrequested to merge
fix-api-failure-false-404 into develop

Summary

Fixes profile pages and post lists incorrectly showing 404 or "Nothing more to load" when API calls fail (e.g., 503 errors during high load).

Problem

During production traffic testing, we observed:

  • /@gtg/notifications showing 404 when the profile API returned 503
  • /trending/my showing "Nothing more to load" when posts couldn't be fetched

The root cause was that the code didn't distinguish between:

  • API failure (temporary, should show error with retry)
  • Resource not found (permanent, should show 404)

Solution

Use React Query's isError and isPending states to properly handle different scenarios:

State Before After
API fails (503) 404 page Error page with retry
Post list API fails "Nothing more to load" Error page with retry
User doesn't exist 404 page 404 page (unchanged)
Loading 404 page Wait for data

Changes

profile-layout.tsx:

  • Add isError/isPending states from useQuery
  • Show NoDataError component when API fails
  • Only call notFound() when API confirms user doesn't exist

list-of-posts.tsx:

  • Add isPending state from useInfiniteQuery
  • Show NoDataError component when API fails
  • Only show "Nothing more to load" when data.pages[0].length > 0

Test Plan

  • Visit /@{valid-user} with API working → profile loads
  • Visit /@{valid-user} with API down → shows error with retry option
  • Visit /@{nonexistent-user} → shows 404
  • Visit /trending with API working → posts load
  • Visit /trending with API down → shows error with retry option
  • Client retry after hydration works for flaky APIs

Fixes #789 (closed)

Merge request reports