Skip to content

feat: add DisputeCardSkeleton with layout parity for first-paint stability (Closes #815) - #853

Open
waterWang wants to merge 2 commits into
Predictify-org:mainfrom
waterWang:feat/disputecard-skeleton-815
Open

feat: add DisputeCardSkeleton with layout parity for first-paint stability (Closes #815)#853
waterWang wants to merge 2 commits into
Predictify-org:mainfrom
waterWang:feat/disputecard-skeleton-815

Conversation

@waterWang

Copy link
Copy Markdown

Description

This PR adds DisputeCardSkeleton, a loading skeleton that mirrors the final <DisputeCard/> shape so the first paint doesn't jump when dispute data resolves.

Changes

  • src/pages/DisputeCardSkeleton.tsx — New component with layout parity against DisputeCard:
    • Header: title shards (2 lines, max-w-[75%]) + badge pill (h-6 w-24 !rounded-full)
    • Content: reason paragraph (2 lines), penalty strip (rounded-md, h-12), deadline row, tally row (2 items), audit accordion trigger
    • Footer: state label shard (text-xs, h-3) + action button shard (h-9 rounded-md)
  • src/pages/__tests__/DisputeCardSkeleton.test.tsx — Tests for:
    • Correct test ID and accessible role (role="status", aria-busy="true")
    • sr-only loading message
    • Skeleton shard rendering

Accessibility

  • role="status" + aria-busy="true" for screen reader announcement
  • sr-only "Loading dispute details…" message
  • prefers-reduced-motion honored at the <Skeleton/> level (motion-reduce:animate-none)

Evidence

  • Desktop skeleton layout matches DisputeCard structure
  • Mobile: all widths use ratios (% / w-*), no fixed px values
  • Dark mode: Skeleton component handles theme via Tailwind bg-muted
  • Tests pass

Closes #815

@vercel

vercel Bot commented Aug 6, 2026

Copy link
Copy Markdown

@waterWang is attempting to deploy a commit to the Jagadeesh B's projects Team on Vercel.

A member of the Team first needs to authorize it.

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.

Polish DisputeCard loading skeleton to match final card shape [b#081]

1 participant