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.

1 Like
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)

5

+1 this seems like big oversight, for me making data-save-bar unusable

6

+1

When using SaveBar like this:

<SaveBar id="my-save-bar" open={saveBarOpen} discardConfirmation={false}>
        <button variant="primary" loading={saveBarLoading} onClick={() => submit()} />
        <button loading={isSubmitting} onClick={() => reset()} />
</SaveBar>

setting the loading= to any dynamic value, the loading does not update. Even if it set to true by default
const [saveBarLoading, setSaveBarLoading] = useState(true);

The button is not in loading state.

Only if I explicitly set it to loading="true"

7

I was able to resolve the issue by having a state:

const [saveBarLoading, setSaveBarLoading] = useState<string | boolean>(false);

and setting it to “” when I want loading to appear, false otherwise:

if (isSubmitting) {
      setSaveBarLoading(""); <---- Notice the empty string
} else {
     setSaveBarLoading(false);
}

and applying like this:

<SaveBar id="my-save-bar" open={saveBarOpen} discardConfirmation={false}>
        <button variant="primary" loading={saveBarLoading} onClick={() => submit()} />
        <button loading={isSubmitting} onClick={() => reset()} />
 </SaveBar>