The `loading` props on `button` can no be used as `boolean`

[nullndr]

Consider the following simple code:

<ui-modal>
  <ui-title-bar title="My super modal">
    <button variant="primary" loading>
      My super primary action
    </button>
  <ui-title-bar/>
</ui-modal>

The modal will be displayed, but with the following warning:

Warning: Received `true` for a non-boolean attribute `loading`.

If you want to write it to the DOM, pass a string instead: loading="true" or loading={value.toString()}.
  button
  ui-title-bar
  ui-modal

Let's try with loading="true" then:

Uncaught (in promise) Error: Unexpected value for attribute "loading" on <button>

The modal can not be shown with the show() method since this is undefined:

Uncaught (in promise) TypeError: this.g is undefined
  show       app-bridge.js:1
  toggle     app-bridge.js:1

[charlesdobson]

Hi @nullndr,

Is this being used within a React app? If so, try setting loading="" instead. React has some issues with custom boolean types on web components.

---

As an aside, we've just released App Bridge React v4 with a Modal component that wraps the ui-modal element! https://shopify.dev/docs/api/app-bridge-library/react-components/modal

[nullndr]

@charlesdobson yes, this is for a React app. I'll try the new package.

[charlesdobson]

I bumped the @shopify/app-bridge-types package with better support for this.

You may still need to use the loading="" workaround in React though.

[maruffahmed]

loading="" will make the button spinning. Now how would I implement the loading state conditionally? Like clicking on the primary button doing something which set a loading state true so the primary button is showing spinner.

Currently with "@shopify/app-bridge-react": "4.1.3" if I add loading="false" to the button, it's showing the following error:

[Adamovskiy]

@maruffahmed this is ugly, but seems to be working: loading={workInProgress ? "" : undefined}.