Skip to content

[FE-23] Build LoadingSkeleton component #520

@mftee

Description

@mftee

Problem

Pages that load data asynchronously flash an empty white screen while the request is in flight. This creates a jarring experience and gives no indication to the user that content is loading.

Proposed Solution

Create a LoadingSkeleton component inside frontend/module/components/loading-skeleton/ that renders animated placeholder blocks matching the layout of common page sections.

Acceptance Criteria

  • Exports a base Skeleton component that renders an animated shimmer block with configurable width, height, and borderRadius props
  • Exports a DocumentCardSkeleton variant that matches the layout of a document list row
  • Exports a StatCardSkeleton variant that matches the layout of a dashboard stat card
  • Exports a TableRowSkeleton variant with configurable columnCount prop for table loading states
  • Animation is a left-to-right shimmer effect using CSS animation (no JavaScript animation libraries required)
  • All skeleton variants respect the prefers-reduced-motion media query and show a static grey block instead of the animated shimmer
  • All component files live inside frontend/module/components/loading-skeleton/

Metadata

Metadata

Assignees

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