Skip to content

[docs] Replace playground Loading text with shimmer skeleton#1733

Open
ahmedsadid wants to merge 1 commit into
facebook:mainfrom
ahmedsadid:issue-1550-spinner
Open

[docs] Replace playground Loading text with shimmer skeleton#1733
ahmedsadid wants to merge 1 commit into
facebook:mainfrom
ahmedsadid:issue-1550-spinner

Conversation

@ahmedsadid

Copy link
Copy Markdown
Contributor

What changed / motivation ?

The playground showed a plain "Loading…" text while the editor booted up. This replaces it with a shimmer skeleton that mirrors the playgrounds editor/preview layout, so the loading state previews the eventual UI instead of a bare text label.

  • Reworks PlaygroundPlaceholder in DynamicPlayground.tsx into skeleton editor panels (tab pills + code-line placeholders) and a preview panel, with an animated shimmer sweep (stylex.keyframes).
  • Uses the existing playground theme variables, so it respects light/dark.
  • Adds role="status" / aria-label="Loading playground" for accessibility.

Linked PR/Issues

Part of #1550

Additional Context

tsc, Prettier, ESLint, and waku build all pass. The placeholder is rendered server-side via ClientOnlys fallback, so it appears immediately on load.

Before After
Dark Screen Recording 2026-06-23 at 7 51 55 AM Screen Recording 2026-06-23 at 7 58 53 AM
Light Screen Recording 2026-06-23 at 7 56 41 AM Screen Recording 2026-06-23 at 7 59 26 AM

Pre-flight checklist

@vercel

vercel Bot commented Jun 23, 2026

Copy link
Copy Markdown

@ahmedsadid is attempting to deploy a commit to the Meta Open Source Team on Vercel.

A member of the Team first needs to authorize it.

@meta-cla meta-cla Bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Jun 23, 2026
@ahmedsadid ahmedsadid marked this pull request as ready for review June 23, 2026 14:40
@ahmedsadid ahmedsadid requested review from mellyeliu and nmn as code owners June 23, 2026 14:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant