Skip to content

Add skeleton loading states for all data-fetching components #368

Description

@Kingsman-99

Overview

Data-fetching components show nothing or a spinner while loading. Replace spinners with skeleton screens that match the shape of the loaded content for a polished perceived-performance experience.

Acceptance Criteria

  • Skeleton components for: invoice card, invoice detail page, leaderboard row, payment history row, creator profile, dashboard header stats
  • Skeletons match the exact layout and proportions of the loaded content (same height, same column widths)
  • Skeleton animation: shimmer effect using Tailwind animate-pulse or a custom CSS keyframe
  • Skeletons shown during initial load AND during refetch (React Query isFetching)
  • SkeletonInvoiceCard accepts a count prop to render N placeholders in a grid
  • Skeletons work in both light and dark mode
  • aria-busy="true" and aria-label="Loading..." on skeleton containers for screen readers
  • No skeleton shown if data loads in under 200 ms (avoids flash for fast connections) — use a 200 ms delay before showing skeleton

Metadata

Metadata

Labels

Stellar WaveIssues in the Stellar wave programcomplexity: highuiUI styling and visual changes

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions