Skip to content

feat: Add skeleton loading support to table#4583

Draft
gethinwebster wants to merge 1 commit into
mainfrom
dev-v3-gethinw-table-skeleton
Draft

feat: Add skeleton loading support to table#4583
gethinwebster wants to merge 1 commit into
mainfrom
dev-v3-gethinw-table-skeleton

Conversation

@gethinwebster
Copy link
Copy Markdown
Member

Add skeleton prop ({ totalRows: number }) that renders skeleton placeholder rows to fill the table while data is loading.

  • skeleton.totalRows defines total visible rows (typically page size)
  • Skeleton rows rendered = max(0, totalRows - items.length)
  • Standard loading: items=[] + loading=true + skeleton -> all skeleton rows
  • Progressive loading: items=[partial] + skeleton -> real rows + trailing skeleton
  • A11y: visually-hidden row with ScreenreaderOnly loadingText before skeleton rows
  • Skeleton rows use aria-hidden=true
  • Includes interactive demo pages for both patterns

Description

Related links, issue #, if available: n/a

How has this been tested?

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

  • Changes include appropriate documentation updates.
  • Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
  • Changes do not include unsupported browser features, see CONTRIBUTING.md.
  • Changes were manually tested for accessibility, see accessibility guidelines.

Security

Testing

  • Changes are covered with new/existing unit tests?
  • Changes are covered with new/existing integration tests?

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

Add skeleton prop ({ totalRows: number }) that renders skeleton placeholder
rows to fill the table while data is loading.

- skeleton.totalRows defines total visible rows (typically page size)
- Skeleton rows rendered = max(0, totalRows - items.length)
- Standard loading: items=[] + loading=true + skeleton -> all skeleton rows
- Progressive loading: items=[partial] + skeleton -> real rows + trailing skeleton
- A11y: visually-hidden row with ScreenreaderOnly loadingText before skeleton rows
- Skeleton rows use aria-hidden=true
- Includes interactive demo pages for both patterns
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant