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

Polaris
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>