stuck summit
I'm working on a data table with skeleton loading states (you know, those gray animated bars that show while content is loading), but I'm running into a super annoying issue that's driving me crazy! When my table switches from loading state to normal state, the table headers keep moving/shifting. It's creating this jarring visual jump that makes the whole UI feel unstable.
What I'm Trying to Achieve
- Skeleton loading bars for each table row (like the ones you see on LinkedIn, Facebook, etc.)
- Zero layout shift - headers should stay perfectly still
- Smooth transition between loading and loaded states
- Professional looking loading experience
Example of the Issue
Imagine a simple user table like this:
Normal State:
| Name | Email | Status | Actions |
|---------------|---------------------|-----------|---------|
| John Smith | john@example.com | Active | Edit |
| Jane Doe | jane@company.org | Inactive | Edit |
Loading State (what I want):
| Name | Email | Status | Actions |
|---------------|---------------------|-----------|---------|
| ████████████ | ████████████████ | ██████ | ████ |
| ████████ | ████████████████ | ██████ | ████ |
Questions
- Has anyone dealt with this before? What worked for you?
- Are there any CSS tricks or best practices I'm missing?
- Should I be using a different approach entirely?
- Any good libraries that handle this well?
Would Really Appreciate
- Code examples or CodePen demos
- Articles/tutorials you've found helpful
- Any tips from your own experience
- Even just pointing me in the right direction!
I've been stuck on this for way too long and could really use some fresh eyes on the problem. Thanks in advance!
rare bone