@backstage/loading-to-is-pending
Backstage 1.51.0 migration codemod that renames the deprecated loading prop to isPending on @backstage/ui components and updates CSS selectors from data-loading to data-ispending.
What it does
JSX prop rename: loading -> isPending
In @backstage/ui v0.15.0 (Backstage 1.51.0), the loading prop was deprecated in favor of isPending (React Aria naming) on:
AlertButtonButtonIconTableTableRoot
This codemod renames loading={...} to isPending={...} on those components when imported from @backstage/ui, including:
- Named imports:
import { Button } from '@backstage/ui' - Aliased imports:
import { Button as SaveButton } from '@backstage/ui' - Namespace imports:
<UI.Button loading={...} />
CSS selector rename: [data-loading] -> [data-ispending]
Updates attribute selectors in stylesheets and CSS modules to target the new data-ispending attribute.
What is NOT migrated
loadingon non-BUI components: MUIButton, custom components, and other libraries are unchanged.- Spread props: Dynamic
{...props}with aloadingkey cannot be renamed statically — use the optional AI fixup step. - Unrelated
loadingAPIs: React QueryisLoading, route loading states, etc. are not touched.
Optional: AI fixup step
Enable with --param aiFixup=true:
- Handles spread props and dynamic
loadingkeys on BUI components - Catches remaining namespace/aliased import edge cases
- Updates CSS still targeting only
data-loadingfor BUI pending styles
Installation
bash
Usage (from this repo)
bash
Development
From the repo root:
bash
Or from this package directory:
bash
License
MIT