Polaris-react: Page loading buttons do not work inside EmbeddedApp

[montalvomiguelo]

Issue summary

The loading property for button actions in <Page> does not work inside <EmbeddedApp> component

<EmbeddedApp shopOrigin={shopOrigin} apiKey={apiKey}>
  <Page
    title={`Order ${this.state.orderName}`}
    primaryAction={{
      content: `Refund $ ${this.state.refundAmount}`,
      loading: true
    }}
    secondaryActions={[
      {content: 'View order'},
    ]}
  >
</EmbeddedApp>

If <EmbeddedApp> is removed it works

Expected behavior

By adding adding the loading property it should show a Spinner.

Actual behavior

It does not show a spinner

Specifications

• Polaris version: ^1.9.1
• React version: ^16.2.0
• Browser: chrome
• Device: macbook
• Operating System: macos

[chloerice]

Hi @montalvomiguelo, thanks for raising this! This is related to #203 and #236 and a fix is in progress.

[bitmelt]

I see that #236 got closed as fixed in Polaris 2.0, but this bug is still open. I'm experiencing the same issue on Polaris 2.1.1. Is the fix for this still in progress?

[tmlayton]

👋 @montalvomiguelo @bitmelt apologies for the confusion – we are not currently planning on adding support for an action loading spinner when using <Page> within an embedded app (formerly <EmbeddedApp> and now handled by <AppProvider>). Although, setting loading: true should support triggering the loading bar same as a button does when using the EASDK methods, which it currently does not. I have opened an internal issue for this.

As a workaround, you can call this.context.easdk.startLoading() within onAction to start the loading bar.

import React from 'react';
import {render} from 'react-dom';
import * as PropTypes from 'prop-types';
import {AppProvider, Page} from '@shopify/polaris';

class MyApp extends React.Component {
  // tells React to attach the `easdk` to `this.context`
  static contextTypes = {
    easdk: PropTypes.object,
  };

  state = {
    refundAmount: 10,
    orderName: '#1234',
  };

  render() {
    return (
      <Page
        title={`Order ${this.state.orderName}`}
        primaryAction={{
          content: `Refund $ ${this.state.refundAmount}`,
          onAction: () => { this.context.easdk.startLoading(); },
        }}
        secondaryActions={[
          {content: 'View order'},
        ]}
      />
    );
  }
}

render(
  <AppProvider
    apiKey="YOUR_APP_API_KEY"
    shopOrigin="https://CURRENT_LOGGED_IN_SHOP.myshopify.com"
  >
    <MyApp />
  </AppProvider>,
  document.querySelector('#app'),
);

[bitmelt]

Thanks for the quick response! As a workaround yesterday I moved the buttons to inside the page, where the loading indicator works fine. Please update this issue when you resolve the internal bug about making loading: true trigger the loading bar. Would loading be a Page attribute/prop then, rather than on primaryAction, since the bar is for the whole page and not for a single button?

[tmlayton]

The loading prop would still be on the action to signal that the particular button triggers a loading bar. A mix and match is needed in some cases such as having actions open external links, which should not trigger a loading bar.

Edit: we don’t want to add a loading prop to Page to keep the API align for both embedded and non-embedded apps.

[imgntn]

i'm a little confused -- it would be nice if the primaryAction button in <Page> in an embedded app turned the button text into a spinner when loading:true - the same way it works on the primaryAction in <PageActions> . Is that the bug fix that's in the works? For a primary action like "Save" that is async, the UX feels pretty rough right now, since there's no response when you click. Thanks!

[tmlayton]

Hey @imgntn, after taking a closer look at this, yes, adding a loading prop would render a button with a spinner as well as trigger the loading bar. That is the fix we will implement. In the meantime, take a look at https://github.com/Shopify/polaris/issues/272#issuecomment-396061438 for triggering the loading bar when clicking on an action.

[tmlayton]

Hey @imgntn good and bad news – with Polaris v3.0.0 we released the <Loading /> component which replaces this.context.easdk.startLoading() and stopLoading() as well as the <Toast /> component and load of other updates related to embedded apps including switching over the new Shopify App Bridge.

That being said, the team who builds Shopify App Bridge has not yet implemented support for loading on buttons. There is an issue open in their repo to support it and I have cross-linked this issue, but as far as I know it is not planned work. I’m going to close this issue for now and if Shopify App Bridge supports it in the future, we will add support for it too.