Skip to content

[Website] Center the Playground file-loading message - #4072

Merged
adamziel merged 2 commits into
trunkfrom
adamziel/visible-loading-message
Jul 15, 2026
Merged

[Website] Center the Playground file-loading message#4072
adamziel merged 2 commits into
trunkfrom
adamziel/visible-loading-message

Conversation

@adamziel

@adamziel adamziel commented Jul 15, 2026

Copy link
Copy Markdown
Collaborator

The Files pane now makes the boot wait obvious instead of showing a faint loader at the top of an otherwise empty pane.

The pane fills its available height and centers a larger dark spinner with the message “Playground files are still loading…”. The same loading-state component now uses readable 16px text, and a focused test locks the boot-time copy.

Before After
The faint file-loading state aligned near the top of the Files pane The darker file-loading state centered vertically in the Files pane

Tests

  • npm exec -- nx test playground-website --testFile=site-tool-panels.spec.tsx
  • npm exec -- nx typecheck playground-website
  • npm exec -- nx lint playground-website
@adamziel
adamziel force-pushed the adamziel/visible-loading-message branch from 08b96f8 to 30f3e17 Compare July 15, 2026 21:55
@adamziel
adamziel marked this pull request as ready for review July 15, 2026 21:57
@adamziel
adamziel requested review from a team, JanJakes and Copilot July 15, 2026 21:57

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

Updates the Files pane loading state to be more prominent and readable while making the “boot wait” state explicit.

Changes:

  • Centered and strengthened the pane loading UI (larger spinner, darker color, larger text).
  • Adjusted layout CSS so the tools/panes can fill available height for proper vertical centering.
  • Updated copy for the Files boot-time loading state and added a focused test locking that text.

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 3 comments.

Show a summary per file
File Description
packages/playground/website/src/components/spinner/style.module.css Makes spinner color configurable via a CSS variable so it can inherit pane text color.
packages/playground/website/src/components/site-manager/site-info-panel/style.module.css Adjusts flex/layout so tool content can expand and center loading state vertically.
packages/playground/website/src/components/site-manager/site-info-panel/site-tool-panels.tsx Updates the Files tab boot-time loading message copy.
packages/playground/website/src/components/site-manager/site-info-panel/site-tool-panels.spec.tsx Adds a test asserting the updated boot-time loading copy; refactors helper to accept a client override.
packages/playground/website/src/components/site-manager/site-info-panel/index.tsx Adds a class hook for the tools container to support new layout rules.
packages/playground/website/src/components/pane-loading/style.module.css Improves loading-state styling (color, type size/leading) and wires spinner color to currentColor.
packages/playground/website/src/components/pane-loading/index.tsx Increases spinner size for better visibility.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread packages/playground/website/src/components/spinner/style.module.css Outdated
@adamziel
adamziel merged commit e2d3cea into trunk Jul 15, 2026
53 checks passed
@adamziel
adamziel deleted the adamziel/visible-loading-message branch July 15, 2026 22:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment