Feature: CSS Skeleton Data Table Loading Shimmer
Category
component
Priority
Low
Module or Files Affected
submissions/examples/skeleton-data-table-em/
Problem Description
When fetching data tables asynchronously, raw spinners do not represent the layout being loaded. EaseMotion has basic element skeletons, but lacks a complete multi-column Data Table Skeleton component with animated wave shimmer lines.
Why This Matters
Skeleton table screens reduce perceived loading times by giving users immediate visual context of incoming structured data rows.
Expected Improvement
A full data table placeholder containing multi-row shimmer pulses, header bar placeholders, circular avatar row nodes, text line blocks, and pagination skeleton controls.
Proposed Solution
Build a table structure styled with CSS linear gradients and moving background position shimmer keyframes (@Keyframes shimmer-wave).
Implementation Steps
Create submissions/examples/skeleton-data-table-em/.
Build index.html with semantic
placeholder structure containing headers, 5 skeleton body rows, and pagination footers.
Write styles.css creating background gradient linear animations (background-size: 200% 100%), rounded bone pill styles, and layout spacing.
Document usage in README.md.
Files to Touch
submissions/examples/skeleton-data-table-em/index.html
submissions/examples/skeleton-data-table-em/styles.css
submissions/examples/skeleton-data-table-em/README.md
Acceptance Criteria
Pure CSS implementation with zero JavaScript.
Shimmer gradient wave sweeps continuously from left to right across all skeleton rows.
Layout mirrors a real data table with headers, checkboxes, avatar cells, text lines, and action buttons.
Respects prefers-reduced-motion media query by turning off moving gradients.
Suggested Labels
enhancement, good first issue, component, css-only
Estimated Effort
S
Additional Context
100% pure CSS implementation.
Feature: CSS Skeleton Data Table Loading Shimmer
Category
component
Priority
Low
Module or Files Affected
submissions/examples/skeleton-data-table-em/
Problem Description
When fetching data tables asynchronously, raw spinners do not represent the layout being loaded. EaseMotion has basic element skeletons, but lacks a complete multi-column Data Table Skeleton component with animated wave shimmer lines.
Why This Matters
Skeleton table screens reduce perceived loading times by giving users immediate visual context of incoming structured data rows.
Expected Improvement
A full data table placeholder containing multi-row shimmer pulses, header bar placeholders, circular avatar row nodes, text line blocks, and pagination skeleton controls.
Proposed Solution
Build a table structure styled with CSS linear gradients and moving background position shimmer keyframes (@Keyframes shimmer-wave).
Implementation Steps
placeholder structure containing headers, 5 skeleton body rows, and pagination footers.Create submissions/examples/skeleton-data-table-em/.
Build index.html with semantic
Write styles.css creating background gradient linear animations (background-size: 200% 100%), rounded bone pill styles, and layout spacing.
Document usage in README.md.
Files to Touch
submissions/examples/skeleton-data-table-em/index.html
submissions/examples/skeleton-data-table-em/styles.css
submissions/examples/skeleton-data-table-em/README.md
Acceptance Criteria
Pure CSS implementation with zero JavaScript.
Shimmer gradient wave sweeps continuously from left to right across all skeleton rows.
Layout mirrors a real data table with headers, checkboxes, avatar cells, text lines, and action buttons.
Respects prefers-reduced-motion media query by turning off moving gradients.
Suggested Labels
enhancement, good first issue, component, css-only
Estimated Effort
S
Additional Context
100% pure CSS implementation.