fix(core): forward loading to json-render Button's underlying BaseButton

packages/core/src/client/webcomponents/json-render/JsonRender.stories.ts

@@ -55,10 +55,12 @@ export const Gallery: Story = {
       b2: { type: 'Badge', props: { text: '3 warnings', variant: 'warning' } },
       b3: { type: 'Badge', props: { text: '1 error', variant: 'danger' } },
       b4: { type: 'Badge', props: { text: 'v0.3.4', variant: 'default' } },
-      buttons: { type: 'Stack', props: { direction: 'row', gap: 8 }, children: ['btn1', 'btn2', 'btn3'] },
+      buttons: { type: 'Stack', props: { direction: 'row', gap: 8 }, children: ['btn1', 'btn2', 'btn3', 'btn4'] },
       btn1: { type: 'Button', props: { label: 'Rebuild', variant: 'primary', icon: 'ph:arrows-clockwise' } },
       btn2: { type: 'Button', props: { label: 'Open', variant: 'secondary', icon: 'ph:arrow-square-out' } },
       btn3: { type: 'Button', props: { label: 'Delete', variant: 'danger', icon: 'ph:trash' } },
+      /* `icon` is intentionally still set here — `loading` takes priority and replaces it with the spinner, so this also demonstrates that precedence. */
+      btn4: { type: 'Button', props: { label: 'Deploying…', variant: 'primary', icon: 'ph:rocket-launch', loading: true } },
       progress: { type: 'Progress', props: { value: 68, max: 100, label: 'Bundling' } },
       toggle: { type: 'Switch', props: { label: 'Notifications', value: '{{notifications}}' } },
       divider: { type: 'Divider', props: { label: 'Details' } },

packages/core/src/client/webcomponents/json-render/components/Button.ts

@@ -11,21 +11,24 @@ export interface ButtonProps {
   variant?: BaseVariant
   icon?: string
   disabled?: boolean
+  /** Shows `BaseButton`'s spinner in place of `icon` and implies `disabled`. */
+  loading?: boolean
 }
 
 export const Button = defineComponent({
   name: 'JrButton',
   props: registryProps<'Button', ButtonProps>(),
   setup(ctx) {
     return () => {
-      const { label, icon, variant = 'secondary', disabled } = ctx.element.props
+      const { label, icon, variant = 'secondary', disabled, loading } = ctx.element.props
       const press = ctx.on('press')
       const resolved: BaseVariant = VARIANTS.has(variant) ? variant : 'secondary'
 
       return h(BaseButton, {
         variant: resolved,
         size: 'sm',
         disabled,
+        loading,
         onClick: () => press.emit(),
       }, {
         icon: icon

test/__snapshots__/tsnapi/@vitejs/devtools/client/webcomponents.snapshot.d.ts

@@ -13,6 +13,7 @@ export interface ButtonProps {
   variant?: BaseVariant;
   icon?: string;
   disabled?: boolean;
+  loading?: boolean;
 }
 export interface CodeBlockProps {
   code?: string;