Add spinners and skeleton loaders to dashboard loading states#42345
Merged
Conversation
Co-authored-by: pelikhan <4175913+pelikhan@users.noreply.github.com>
Co-authored-by: pelikhan <4175913+pelikhan@users.noreply.github.com>
Copilot created this pull request from a session on behalf of
pelikhan
June 29, 2026 21:06
View session
Contributor
There was a problem hiding this comment.
Pull request overview
This PR improves the Agentic Workflows Dashboard canvas UX by replacing plain-text loading placeholders with visual progress indicators (spinner + skeleton loaders), especially for slower logs-backed tabs.
Changes:
- Added shared CSS for a rotating spinner and a shimmer skeleton line placeholder.
- Updated dashboard tab loading states (Definitions, Runs, Usage, Experiments) to show spinners and skeleton rows.
- Enhanced long-running states (e.g., Runs/Usage) with an explicit “Logs queries can be slow…” hint.
Show a summary per file
| File | Description |
|---|---|
.github/extensions/agentic-workflows-dashboard/web/styles.css |
Adds reusable spinner + skeleton shimmer styles used across dashboard loading states. |
.github/extensions/agentic-workflows-dashboard/web/index.html |
Replaces text-only loading states with skeleton rows and spinner+label indicators across multiple tabs. |
Review details
Tip
Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Files reviewed: 2/2 changed files
- Comments generated: 5
- Review effort level: Low
Comment on lines
+166
to
+183
| /* Skeleton shimmer */ | ||
| @keyframes awd-shimmer { | ||
| 0% { | ||
| background-position: -400% 0; | ||
| } | ||
| 100% { | ||
| background-position: 400% 0; | ||
| } | ||
| } | ||
|
|
||
| .awd-skeleton-line { | ||
| display: block; | ||
| height: 12px; | ||
| border-radius: 4px; | ||
| background: linear-gradient(90deg, var(--bgColor-muted, #f6f8fa) 25%, var(--bgColor-neutral, #eaeef2) 50%, var(--bgColor-muted, #f6f8fa) 75%); | ||
| background-size: 400% 100%; | ||
| animation: awd-shimmer 1.5s ease-in-out infinite; | ||
| } |
| @@ -77,7 +77,10 @@ <h2 class="Box-title">Workflow definitions <span class="Counter ml-1" x-text="de | |||
| </div> | |||
| <!-- loading --> | |||
| <div class="Box-body color-fg-muted text-center py-4" x-cloak x-show="loadingDefinitions"> | |||
| </div> | ||
| </template> | ||
| </div> | ||
| <div class="Box-body color-fg-muted text-center py-3" x-cloak x-show="loadingRuns"> |
| </div> | ||
| </template> | ||
| </div> | ||
| <div class="Box-body color-fg-muted text-center py-3" x-cloak x-show="loadingUsage"> |
| @@ -408,7 +459,10 @@ <h2 class="Box-title">Experiments <span class="Counter ml-1" x-text="experiments | |||
| </div> | |||
| <!-- loading --> | |||
| <div class="Box-body color-fg-muted text-center py-4" x-cloak x-show="loadingExperiments"> | |||
Contributor
|
🎉 This pull request is included in a new release. Release: |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
API-driven tabs in the dashboard showed plain text during fetches with no visual progress indicator. The
logs-backed Runs and Usage tabs are particularly slow and gave no hint to the user that anything was happening.CSS (
web/styles.css).awd-spinner— 16px rotating border spinner using Primer color tokens (--borderColor-default,--fgColor-accent).awd-skeleton-line— shimmer-animated block for skeleton placeholder contentHTML (
web/index.html)awd-usage-rowgrid layout + spinner + same slow-query hint