Skip to content

feat: StreamRow skeleton first paint (Issue #1033) - #1338

Merged
greatest0fallt1me merged 4 commits into
Streampay-Org:mainfrom
VeronicDev:task/streamrow-skel-v7
Jul 29, 2026
Merged

feat: StreamRow skeleton first paint (Issue #1033)#1338
greatest0fallt1me merged 4 commits into
Streampay-Org:mainfrom
VeronicDev:task/streamrow-skel-v7

Conversation

@VeronicDev

Copy link
Copy Markdown
Contributor

Summary

Adds a loading skeleton placeholder that renders while StreamRow data is loading, preventing blank flash on first paint (Issue #1033).

Changes

app/components/StreamRow.tsx

  • Added loading?: boolean prop to StreamRowProps with JSDoc documentation
  • Added early return that renders a themed skeleton placeholder when loading=true (before any hooks, matching StreamProgress pattern)
  • Skeleton layout mirrors the real StreamRow:
    • Color stripe placeholder
    • Identity row: circular avatar skeleton + recipient name + schedule text
    • Status badge skeleton
    • Meta section: Rate, Status, Burn-down with dt/dd labels
    • Progress bar skeleton (track + label row)
    • Action button skeleton
  • Wrapper carries aria-busy="true" and aria-label="Stream row is loading"
  • All skeleton children are aria-hidden="true"
  • Respects the density prop: applies stream-row--compact class when density="compact"
  • Imports the existing Skeleton component from ./Skeleton

app/components/StreamRow.test.tsx

  • Added 12 focused tests under a new loading skeleton (Issue #1033) describe block:
    • Skeleton renders with stream-row--skeleton class
    • aria-busy="true" attribute
    • aria-label="Stream row is loading"
    • No live content (recipient, action button, status badge, progress) leaks
    • Skeleton elements exist
    • Circular avatar skeleton rendered
    • All skeletons have aria-hidden="true"
    • Compact density modifier works with skeleton
    • Color stripe skeleton renders
    • dt elements rendered in meta section
    • Normal render when loading=false
    • Normal render when loading=undefined

Testing

  • 89/89 tests pass (all 77 existing + 12 new)
  • ESLint clean
  • Follows established pattern from StreamProgress skeleton implementation

Closes #1033

JS hook + data-reduced-motion attribute + swipe-transition guard. CSS-level prefers-reduced-motion fallback in globals.css. Focused tests for all statuses.
Adds a loading prop to StreamRow that renders a themed skeleton placeholder matching the StreamRow layout — identity avatar, recipient name, schedule, status badge, meta section (Rate/Status/Burn-down), progress bar, and action button. Uses the existing Skeleton component with proper aria-busy and aria-hidden for accessibility.
@drips-wave

drips-wave Bot commented Jul 28, 2026

Copy link
Copy Markdown

@VeronicDev Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

@greatest0fallt1me
greatest0fallt1me merged commit 85f5d36 into Streampay-Org:main Jul 29, 2026
1 check passed
@greatest0fallt1me

Copy link
Copy Markdown
Contributor

Merged into main via admin resolver (-X theirs).

@greatest0fallt1me

Copy link
Copy Markdown
Contributor

LGTM — clean, tested. Merged 🙌

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.

Add loading skeleton on StreamRow first paint (v7)

2 participants