Whats the easiest way to add loading indicators between pages on the embedded app inside Shopify admin?

Question

I am using Shopify App Bridge to embed my app in the Shopify admin with the App Bridge Navigation bar. I have spend days trying to work out how to add a loading indicator between pages as it currently loads but the previous page is still there until the next page is ready to be displayed and there is no indication of loading. Is there a simple fix for this as I have little understanding of javascript and have a working app using flask and python but can't understand what I need to add to my html templates to get it working.

I have tried the Shopify docs, most specifically - https://shopify.dev/tools/app-bridge/actions/loading

I added the following in the head of the html templates:

<script src="https://unpkg.com/@shopify/app-bridge@1.10.1/umd/index.js"></script>

and in the body of the html templates:

<script type="text/javascript">
import createApp from '@shopify/app-bridge';
import {Loading} from '@shopify/app-bridge/actions';

const app = createApp({
  apiKey: '12345',
  shopOrigin: shopOrigin,
});

const loading = Loading.create(app);
</script>

I have added my apiKey and shopOrigin base domain directly just to test, but I am unsure if this is what I need to do and if so what else do I need to add for the loading part.

It seems that I might need to add this, but not sure where or what I need to Do when loading starts.

loading.subscribe(Loading.Action.START, () => {
  // Do something when loading starts
});

Any help or pointers would be greatly appreciated, thanks.

Answer 1

Shopify has two key things. I use neither of them and no one cares, and really, it does not matter, but if you want to be a perfectionist, the routine could be:

You prep for yourself their Skeleton components, which you can load immediately, and thus fake out the user that you are presenting content real soon now. Secondly, upon rendering the fake-out skeleton, you start the loading component and it just goes. Once you actually get your content, you overwrite the Skeleton and end loading.

It is pretty simple. All this is plug and pray with Polaris. If you are not using Polaris, you're on your own to invent whatever works for you. App Bridge is just that, a bridge to secure communications, not a UI/UX provider. So don't count on it for much interactivity other than the very basics.