Skip to content

Add unified data state UI system for loading skeletons and empty states across list pages #545

Description

@Chucks1093

Summary

List and data pages currently handle loading and empty states independently, producing inconsistent UI and repeated logic. A unified approach should standardise both concerns: skeleton placeholders during fetching and empty state components when queries settle with zero results.

Scope

  • Add a CreatorCardSkeleton component matching the real card dimensions with animated pulse on avatar, name, price, and holder count placeholders
  • Add an EmptyState component accepting a message and an optional CTA — used on holdings, creator list, and any future list page
  • Wire the skeleton into creator list and holdings pages during isLoading
  • Wire the empty state into holdings when the query settles with zero results; link the CTA to the creator discovery page
  • Skeletons and empty states must not appear simultaneously — skeleton only during loading, empty state only after a settled empty response

Acceptance Criteria

  • Skeleton matches real card layout; animated pulse on all placeholder regions
  • Skeleton replaced by real card on data arrival with no layout shift
  • Empty state only renders after query settles with zero results
  • Empty state CTA navigates to creator discovery
  • Both components used consistently on holdings and creator list pages

ETA: 12 hours


Coordinate on Telegram

Metadata

Metadata

Assignees

Labels

GrantFox OSSIssue tracked in GrantFox OSSMaybe RewardedIssue may be eligible for a GrantFox rewardOfficial Campaign | FWC26Campaign: Official Campaign | FWC26

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions