You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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! ✨
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.tsxwrapsHomePageClientinSuspenseand uses<DashboardSkeleton />as the page-level fallback.HomePageClientusesuseSearchParams(), which can make the client subtree suspend during initial load or navigation back to/.DashboardSkeleton, the home page temporarily renders large result-dashboard placeholders instead of a smaller shell or form-level fallback.components/home-page-client.tsxalso rendersDashboardSkeletoninside the result area whenloadingis true and nodisplayDataexists, so the same large skeleton is reused for two different states.Tasks
app/page.tsxwith a lightweight home-page shell that preserves the header/form area, or moveuseSearchParams()behind a smaller boundary./does not cover the whole page with result placeholders.Tip
🚀 Want to contribute?
Comment
assign meto be automatically assigned to this issue via our GitHub Actions bot. Happy coding! ✨