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
    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