feat: Add skeleton loading support to table#4583
Draft
gethinwebster wants to merge 1 commit into
Draft
Conversation
6681d62 to
465f073
Compare
465f073 to
58e6f84
Compare
58e6f84 to
14ad9b9
Compare
14ad9b9 to
fa974ca
Compare
fa974ca to
b98f8db
Compare
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #4583 +/- ##
=======================================
Coverage 97.50% 97.50%
=======================================
Files 947 948 +1
Lines 30248 30269 +21
Branches 11021 11029 +8
=======================================
+ Hits 29493 29514 +21
- Misses 708 748 +40
+ Partials 47 7 -40 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
b98f8db to
290be8c
Compare
290be8c to
99a42fb
Compare
99a42fb to
822f331
Compare
822f331 to
69c7893
Compare
69c7893 to
c0f6eb0
Compare
c56e4c1 to
362e123
Compare
362e123 to
03018d3
Compare
03018d3 to
ae6d4fa
Compare
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
ae6d4fa to
00a8498
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Add skeleton prop ({ totalRows: number }) that renders skeleton placeholder rows to fill the table while data is loading.
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
CONTRIBUTING.md.CONTRIBUTING.md.Security
checkSafeUrlfunction.Testing
By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.