Skip to content

bug: Prevent home page skeleton from covering the whole page #192

Description

@O2sa

Opening the home page or returning to it from another route can show the dashboard skeleton across the whole page. This makes the app feel like the entire page is loading, even when the user should see the header, compare form, and empty state immediately.

Context

  • app/page.tsx wraps HomePageClient in Suspense and uses <DashboardSkeleton /> as the page-level fallback.
  • HomePageClient uses useSearchParams(), which can make the client subtree suspend during initial load or navigation back to /.
  • Because the fallback is the full DashboardSkeleton, the home page temporarily renders large result-dashboard placeholders instead of a smaller shell or form-level fallback.
  • components/home-page-client.tsx also renders DashboardSkeleton inside the result area when loading is true and no displayData exists, so the same large skeleton is reused for two different states.

Tasks

  • Replace the page-level Suspense fallback in app/page.tsx with a lightweight home-page shell that preserves the header/form area, or move useSearchParams() behind a smaller boundary.
  • Keep the full dashboard skeleton only for the comparison results area after a compare request starts.
  • Ensure returning from another page to / does not cover the whole page with result placeholders.
  • Verify direct home page loads, browser back navigation, and shared comparison URLs.
  • Add a regression test or visual check for the initial home page loading state.

Tip

🚀 Want to contribute?
Comment assign me to be automatically assigned to this issue via our GitHub Actions bot. Happy coding! ✨

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingmediumui

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions