How to set loading state for Form save bar in Polaris web components?

Polaris
1

When saving a form, usually it is not instant, and will take a few seconds for the data to be saved / validated.

Is there a way to set the save bar state to loading? For the Polaris Web components form.

<form
  data-save-bar
  onsubmit="console.log('submit', new FormData(event.target)); event.preventDefault();"
>
  <label>
    Name:
    <input name="username" />
  </label>
</form>

I tried adding “loading” attribute to the form, but it does not work.

2

Hi @soulchild

Good question - investigating to see if this is possible.

3

You must use the ui-save-bar component (ui-save-bar) to have more precise control.

4

Thank you for the suggestion, I am aware that ui-save-bar can do it, I am just curious if this can be done directly on the form element itself, else the “data-save-bar” does not seem practical as most operation on form requires some time to perform (hence loading state is needed)