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

Retired Boards Appdev Tools
1

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.

2

I think you are on the right track. The loading app bridge component is firing two events “Loading.Action.START” and “Loading.Action.STOP”. You can use these events to show and hide your loading indicator.

for example: ( the actual implementation is dependent on your app)

loading.subscribe(Loading.Action.START, () => {
     document.querySelector('#loading').classList.add('show')
});

loading.subscribe(Loading.Action.STOP, () => {
     document.querySelector('#loading').classList.remove('show')
});

Refrence: https://shopify.dev/tools/app-bridge/actions/loading

Adititonaly, the app bridge uses redux to manage its state. You can use the Redux devtools extension to see what actions are fired at what time to understand the flow.