Contextual Save Bar has no loading state

[Stef733]

Issue summary

The Contextual Save Bar disappears as soon as a form is submitted without showing a loading state.

https://github.com/Shopify/shopify-app-template-remix/assets/15696423/6761dc07-d085-4822-9ec9-bd41891b0273

• @shopify/shopify-app-remix version: 2.3.0
• Node version: 18.19.0
• Operating system: macOS

Expected behavior

The Contextual Save Bar should show a spinner

Actual behavior

The Contextual Save Bar disappears as soon as the form submission begins

Steps to reproduce the problem

Use the following sample route in the shopify remix template.

Note: this issue persists with both fetcher and navigation and both the Shopify Form and the Remix Form and fetcher.Form components.

import type { ActionFunctionArgs } from "@remix-run/node";
import { json } from "@remix-run/node";
import { useFetcher } from "@remix-run/react";
import { Page, Text, TextField } from "@shopify/polaris";
import { useState } from "react";

export const loader = () => null;

export const action = async ({ request }: ActionFunctionArgs) => {
  await new Promise((r) => setTimeout(r, 2000));

  return json({ ok: true });
};

export const Test = () => {
  const fetcher = useFetcher();
  const isLoading = fetcher.state !== "idle";

  const [value, setValue] = useState("");

  return (
    <Page>
      <Text as="h2" variant="heading3xl" tone="critical">Form state: {fetcher.state}</Text> 
      <fetcher.Form method="post" data-save-bar>
        <TextField
          autoComplete="test"
          label="test"
          name="test"
          value={value}
          onChange={setValue}
        />
        <button
          disabled={isLoading}
          onClick={() => console.log("click")}
          type="submit"
        >
          {isLoading ? "Loading..." : "Submit"}
        </button>
      </fetcher.Form>
    </Page>
  );
};

export default Test;

[henrytao-me]

Thanks for reporting. We are looking into it.

[mahdi-akbary]

Any update on the loading state? or at least a work around!

[Stef733]

Any update on the loading state? or at least a work around!

@henrytao-me

[charlesdobson]

Hi @Stef733,

We added a new ui-save-bar element for you to manually control the state of the contextual save bar (including disabled and loading buttons) if that works better for you: https://shopify.dev/docs/api/app-bridge-library/web-components/ui-save-bar

There's a SaveBar React component in @shopify/app-bridge-react@4.1.0 too if you'd prefer to use that: https://shopify.dev/docs/api/app-bridge-library/react-components/savebar

Thanks for the feedback!

[gmays]

@charlesdobson @henrytao-me The disabled and loading props on the react app bridge package are not working at all in the latest version of app-bridge react (or web component).