ui: PaneLoader for center-of-page loading + finish radar-icon swap#549
Merged
nadaverell merged 1 commit intomainfrom Apr 27, 2026
Merged
ui: PaneLoader for center-of-page loading + finish radar-icon swap#549nadaverell merged 1 commit intomainfrom
nadaverell merged 1 commit intomainfrom
Conversation
Extract PaneLoader (k8s-ui/components/ui/PaneLoader.tsx) wrapping the animated radar icon + label in the column-stacked layout we standardized on, exposed via the @skyhook-io/k8s-ui barrel. 16 in-pane Loader2 sites across radar OSS now use it: topology, both timeline views (swimlanes + list), helm (HelmView, ChartBrowser, HelmReleaseDrawer, InstallWizard chart-loading, ManifestViewer, ManifestDiffViewer, ValuesViewer), traffic (TrafficView connecting/loading + TrafficWizard detecting), audit, cost, home, resource pane, workload (3 sites), pod filesystem modal. The remaining bespoke holdouts (App.tsx connecting/switching/oidc, TrafficWizard checking, ImageFilesystemModal) keep using the raw radarLoadingIcon import — each has multi-line content (heading + sub-context + actions or a dynamic sub-line) that doesn't fit PaneLoader's icon+label shape. Side cleanups: - Standardize ellipsis to … (Unicode) across swapped labels. - Drop now-unused Loader2 imports where no inline spinner remains. - Bump @skyhook-io/radar-app 0.1.7 → 0.1.8 since the visible loading states changed shape.
nadaverell
added a commit
that referenced
this pull request
Apr 27, 2026
…l source (#550) The radar-app-v0.1.8 publish failed because the workflow runs `npm version 0.1.8 --no-git-tag-version` against source already at 0.1.8 (#549 bumped it before tagging), and npm errors with "Version not changed". Two fixes: - Add --allow-same-version so source-equal-to-tag isn't fatal. Future contributors can bump source freely without breaking the publish. - Bump source to 0.1.9 to skip the snared 0.1.8 tag and publish a clean version. The 0.1.8 tag stays as a no-op record.
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.
Summary
Builds on #548 (which introduced the animated radar SVG and swapped the first batch of full-screen Loader2 sites). This PR extracts a reusable
PaneLoadercomponent and finishes the sweep so every in-pane / modal-body / wizard-step loading state now uses the same icon + label shape.PaneLoaderlives atpackages/k8s-ui/components/ui/PaneLoader.tsxand is exported from@skyhook-io/k8s-ui. Call sites collapse from a 5-line<div>… <img/>… <span>…</span></div>block to one line, e.g.<PaneLoader label="Loading topology…" className="flex-1" />.What's swapped (16 sites)
Loading topology…), TimelineList, WorkloadView (3 sites).Connecting to traffic source…/Loading traffic data…), TrafficWizard detecting, PodFilesystemModal.What stays bespoke
Each kept the raw
radarLoadingIconimport for a reason that doesn't fitPaneLoader's simple icon+label shape:App.tsx(3 sites: AuthBarrier OIDC redirect, "Connecting to cluster", "Switching context") — primary heading + sub-context + optional progress message.TrafficWizardchecking state — icon + h2 + sublabel + action buttons.ImageFilesystemModal— dynamic label that toggles between two strings plus a conditional sub-line.Side cleanups
…(Unicode) across swapped labels.Loader2imports where no inline spinner remained.@skyhook-io/radar-app0.1.7 → 0.1.8 since the visible loading states changed shape.Future tweaks to the loader visual now touch one file. Net diff: -119 +73 (~70 lines of repeated structure removed).
Note
Low Risk
Low risk UI refactor that mostly consolidates loading spinners into a shared component; main risk is minor layout/styling regressions in affected screens and modals.
Overview
Adds a shared
PaneLoadercomponent tok8s-ui(exported viacomponents/ui/index.ts) to standardize center-of-pane loading states using the animated radar icon + label.Replaces numerous bespoke loading placeholders in
k8s-uiviews (resources, timeline, topology, workload) andwebscreens/modals (home, audit, cost, helm flows, timeline, traffic, filesystem) withPaneLoader, and bumps@skyhook-io/radar-appversion0.1.7→0.1.8.Reviewed by Cursor Bugbot for commit ba3a2b2. Bugbot is set up for automated code reviews on this repo. Configure here.