search

jpmorganchase / salt-ds

React UI components built with a focus on accessibility, customization and ease-of-use
https://www.saltdesignsystem.com
Apache License 2.0
132 stars 89 forks source link

Skeleton component build #3781

Open mark-tate opened 4 months ago

mark-tate commented 4 months ago

Skeleton Component Specification (Draft)

Overview

The Skeleton component is designed to provide a visual placeholder for content that is in the process of loading. It helps improve the user experience by giving users a sense of the layout and structure of the content that will eventually be displayed.

Functional Requirements

  1. Types of Skeletons

    • Text Skeleton: Mimics the appearance of text lines.
    • Image Skeleton: Mimics the appearance of an image or media content.
    • Rectangular Skeleton: Mimics the appearance of rectangular blocks, useful for cards or other block elements.
    • Circular Skeleton: Mimics the appearance of circular elements, useful for avatars or icons.

  2. Customization

    • Width and Height: Allow customization of the width and height of the skeleton elements.
    • Shape: Support different shapes (e.g., rounded corners, circles).
    • Animation: Provide options for different loading animations (e.g., pulse, wave).
    • Color: Allow customization of the background and animation colors to match the theme.

  3. Composition

    • The Skeleton component should be composable, allowing multiple skeleton elements to be combined to form complex placeholders (e.g., a card with a text skeleton and an image skeleton).

  4. Accessibility

    • The Skeleton component should be accessible and not interfere with screen readers. It should be hidden from assistive technologies to avoid confusion.

Non-Functional Requirements

  1. Performance

    • The Skeleton component should be lightweight and not significantly impact page load times.
    • It should use efficient rendering techniques to ensure smooth animations and transitions.

  2. Responsiveness

    • The Skeleton component should be responsive and adapt to different screen sizes and resolutions.
    • It should support media queries for responsive design.

  3. Theming

    • The Skeleton component should support theming, allowing it to inherit styles from the parent theme or be customized via theme overrides.

  4. Documentation

    • The Skeleton component should be well-documented, including usage examples, API references, and customization guides.

  5. Testing

    • The Skeleton component should be thoroughly tested, including unit tests, integration tests, and end-to-end tests.
    • It should be tested across different browsers and devices to ensure compatibility.

Alternative Component name

mark-tate commented 4 months ago

Expected to take 2 sprints (1 design, 1 build)

mark-tate commented 1 month ago

Galao Goal: @bhoppers2008 this could be a quick win and could be used by MCP

mark-tate commented 1 month ago

Moving to Q1, if we can identify as a quick win and have capacity we will pull back into Q4