refactor(ui-react): migrate AsyncValue to bui - #1996
Merged
Conversation
Replace the MUI v4 `Box` + `@backstage/core-components` `Progress` loading bar with a bui (`@backstage/ui`) `Skeleton`. Public props are unchanged; the `height` prop now sets the skeleton height (default 24). Update the Storybook migration status to `bui`. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
marians
force-pushed
the
migrate-async-value-to-bui
branch
from
July 24, 2026 16:30
148cdc4 to
f1e2ac0
Compare
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
1 participant
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.
What does this PR do?
Migrates the shared
AsyncValuecomponent (@giantswarm/backstage-plugin-ui-react) from MUI v4 to bui (@backstage/ui) — the next component flagged for migration in theui-reactStorybook.The loading state previously used a MUI v4
Boxwrapping a@backstage/core-componentsProgressbar. It now renders a buiSkeleton. This removes the component's last MUI v4 / core-components dependencies, moving its Storybook migration status frommixed→bui.The public props are unchanged (
value,isLoading,errorMessage,children,renderError,renderNotAvailable,height);heightnow sets the skeleton's height (default24). No caller passesheight, so every existing use is behavior-preserving in layout.What is the effect of this change to users?
While an async value is loading, the placeholder is now a bui
Skeletonshimmer instead of a thin progress bar. Same vertical footprint, so no layout shift. Visible in the Cluster/Deployment About cards and the Flux GitOps card.How does it look like?
Verified in the
ui-reactStorybook (Components/AsyncValue) and in the running app on the Cluster detail → Overview About card (loading skeleton renders per field before values resolve).Any background context you can provide?
Part of the ongoing MUI v4 → bui migration of the shared
ui-reactlibrary; migration status is tracked per component in Storybook.Do the docs need to be updated?
No.
Should this change be mentioned in the release notes?