Polished Loading States, Everywhere: Skeleton Components Come to Product Sub-Pages
Polished Loading States, Everywhere: Skeleton Components Come to Product Sub-Pages
Release v1.0.80 · UI/UX · Performance
The Problem
The SaaS Factory dashboard has always loaded with a crisp, structured DashboardSkeleton — placeholder shapes that mirror the real layout so the transition from loading to loaded feels seamless. But step into any product sub-page — Features, Queue, Pipelines, Support, or Competitors — and you'd see a different story: raw strings like "Loading tickets…" or generic pulsing div blocks that bear no resemblance to the content about to appear.
The result was a split-personality interface. The main dashboard felt production-grade; everything behind it felt like a prototype.
The Fix
v1.0.80 closes that gap by introducing dedicated skeleton components for the most-visited product sub-pages, all built on the same shadcn Skeleton primitive already used by the dashboard.
FeaturesTabSkeleton
Mirrors the Features tab's 2-column card grid. Each placeholder card matches the dimensions and spacing of a real feature card, so the layout doesn't shift when data arrives.
SupportTabSkeleton
Replicates the Support tab's layout: five stat cards across the top, followed by a placeholder list beneath. Users can immediately orient themselves to where data will appear, even before the first byte loads.
PipelineTabSkeleton
Renders skeleton table rows that match the Pipeline tab's column structure. Avoids the jarring jump from an empty state to a fully populated table.
Why It Matters
Perceived performance is real performance. Skeleton screens don't make data load faster — they make the wait feel shorter and more intentional. By showing users the shape of what's coming, the interface communicates that it is working, not broken.
Consistency builds trust. An interface that behaves the same way everywhere signals that it was built with care. Inconsistent loading states — some polished, some raw — erode that trust, especially for a platform positioning itself as autonomous and production-ready.
Technical Details
All new skeleton components consume the shadcn Skeleton component, keeping styling consistent and maintenance centralised. No new dependencies were introduced. The previous isLoading text conditionals and spinner + text combinations in src/components/support-tickets-dashboard.tsx have been replaced with the appropriate skeleton component for each view.
This is part of an ongoing effort to bring the same level of polish found on the main dashboard to every corner of the platform.