Skip to content

✨ [Feature]: Add skeleton loading state to FeaturedPlays component #1712

@riteshrana12-dev

Description

@riteshrana12-dev

Contributor Guidelines

  • I have read the guidelines and discussion

Is your feature request related to a problem? Please describe.

The FeaturedPlays component shows a plain "Loading..." text while
plays are being fetched from the API. This gives users no visual
feedback about the structure of the content that is loading,
resulting in a poor user experience.

Describe the solution you'd like.

The FeaturedPlays component in src/common/playlists/FeaturedPlays.jsx
currently shows a plain "Loading..." text while plays are being fetched.

This should be replaced with skeleton loading cards that match the shape
of the actual PlayCard component — including the image area, badge, avatar
row, title, description and footer — with a shimmer animation to indicate
loading state. 4 skeleton cards are shown while data is loading.

Describe alternatives you've considered.

Keeping the plain "Loading..." text is the alternative but it provides
a poor user experience compared to skeleton loading which gives users
a visual preview of the content structure.

Screenshot / Screenshare

No response

Additional context

No response

Record

Code of Conduct

  • I agree to follow this project's Code of Conduct

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions