Form Data Save Bar Animation

Polaris
1

How to make the form data-save-bar show the spinner when saving info as in the ContextualSaveBar I cant find anything about this in the documentation?

Screenshot 2026-03-11 231347

1 Like
2

also I am trying to prevent form submission but i cant i tried e.preventDefault() but it still refresh the embedded app

3

Hey @mohamedelhelw,

Two questions here — let me tackle both.

1. Showing a spinner/loading state on the save bar

The data-save-bar attribute on <form> elements gives you automatic save bar behavior, but it doesn’t directly expose a loading state on the Save button.

For loading/spinner control, you’ll want to use the ui-save-bar component declaratively instead, which gives you full control over the button states. If you’re using React, the SaveBar component from @shopify/app-bridge-react also supports this.

Alternatively, with the programmatic API, you can handle async saves within the onSave callback — the save bar will remain visible while your async operation completes:

<form id="my-form">
  <!-- your fields -->
</form>

<script>
  const form = document.getElementById('my-form');
  form.addEventListener('input', () => {
    shopify.saveBar.show({
      onSave: async () => {
        // Your async save logic here — bar stays visible during this
        await fetch('/your-save-endpoint', { method: 'POST', body: new FormData(form) });
        shopify.saveBar.hide();
      },
      onDiscard: () => {
        form.reset();
        shopify.saveBar.hide();
      }
    });
  });
</script>
4

Thanks to @Liam-Shopify he pointed me in the right direction, but the docs are very confusing and I dont think you can find anywhere how to do that you might want to update that.

Here is the full solution:

      <ui-save-bar id="your-id">
        <button
          onClick={handleSubmit}
          type="button" // this avoids forms submission that cause app reload
          {...({ variant: "primary" } as any)} // TS ignore variant IMP           
        >
          Save
        </button>
        <button
          onClick={() => {
            // your logic here
            shopify.saveBar.hide("abandoned-save-bar");
          }}
        >
          Discard
        </button>
      </ui-save-bar>

another necessary step you must add this line to handleSubmit to show the spinner i found it in another discussion
e.currentTarget.setAttribute(“loading”, “true”);