React Polaris save bar loading spinner not working anymore

Polaris
1 
<SaveBar
  id="editor-modal-save-bar"
  discardConfirmation={isOpen ? true : undefined}
>
  <button
    variant="primary"
    loading={articleIsSaving ? "true" : undefined}
    onClick={() => {
      sendArticleSaveBroadcast(tabId);
    }}
  >
    Save
  </button>
  <button
    onClick={() => {
      closeEditorModal();
    }}
  >
    Discard
  </button>
</SaveBar>

Suddenly my old Polaris React-based Shopify app stopped showing the loading spinner. Does anyone know how I can display the loader on the Save button?

I’ve already tried passing an empty string (""), true as a boolean, and "true" as a string, but nothing seems to work.

need to get this working asap for BFS.

2

I’m using the following and it works fine:

import { SaveBar } from '@shopify/app-bridge-react'

<SaveBar><button loading="" variant="primary" type="submit" /></SaveBar>
3

my bad! forgot to mention, facing this issue when saveBar is used with app-bridge-react Modal component.

the save/discard show up and work but the disabled & loading both aren’t working.

4

Got it. I have it working correctly when displayed in a regular page.

But I’m also using it inside a max modal, but I couldn’t make it show the loading spinner (because the save bar is buggy in max modal). I simply hide the buttons after clicking Save, and display a toast success message.

If you can, my recommendation is to use

<s-app-window>

web component because it works better.

1 Like
5

WebComponent isn’t an viable option for me on this app atm.

Hi @Alan_G, hope it’s okay to tag you here — really appreciate your time!

I’m currently showing a fullscreen loader inside the modal when save is pressed. Hiding the save bar buttons isn’t an option for me — it replaces them with the modal’s close (✕) button, which if accidentally clicked would bypass the discard confirmation entirely.

Could you confirm whether a fullscreen loader on save (rather than a loading state on the save button itself) is acceptable UX for BFS? Also wondering if hiding the save bar buttons is considered compliant.

Lastly, is there any plan from the Shopify team to address the save button loading/disabled state natively? Hoping this gets some love in a future update!

image
image1920×1229 129 KB

6

Hey @webx47, thanks for flagging this! This looks like it may line up with a known issue where the SaveBar button states (loading and disabled) don’t visually render when the SaveBar is inside a max Modal, even though the attributes are technically being set.

You can see more context and follow along at GitHub Issue #375. One thing worth noting from that thread is that disabled does actually work functionally (prevents clicks) even though it doesn’t look disabled, so that might help prevent double-submits in the meantime (but I get it’s not ideal).

Your fullscreen loader approach sounds like a solid workaround for now, and I don’t see any issue with that from a UX standpoint. Could you let me know whether this matches what you’re seeing, or if there’s something different going on in your case?

7

@Alan_G thanks for that discard tip, just added it and it’s working as it should functionally. It just doesn’t give any visual indicator as you mentioned. Also, my app got BFS approved, so this loader workaround seems to be allowed for now.

1 Like
8

This savebar behavior in max modal has existed for years, and I don’t know why they haven’t fixed it.

1 Like