Is there a way to force App Bridge to navigate before load is complete?

App Bridge
1

App Bridge React navigation (NavMenu) waits for the loader to finish before navigating to clicked on page in my Shopify app. I have one particular page in my that loads a notable amount of data up front brought on how the graphQL API is designed. This page takes a few seconds to load everything. Unfortunately NavMenu doesn’t seem to be rendering any kind of loading indicator while loading the new page either. So I received the feedback that some people initially thought the app might be broken.

Is there a way for me to force navigation to happen before data is loaded so the page can show a spinner while loadedData == null?

Or alternatively, is there a way for me to render a loading indicator while a new page is loading upon navigation?

I looked at this question:

but it seems like in App-Bridge-V4 the loading API has been redesigned and no longer has a promise I can subscribe to.

Any help regarding this would be appreciated

2

Good question @Sinan_Pehlivanoglu

It sounds like your app is potentially 100% server side rendered, since the GraphQL request is retrieving data before the page is rendered.

Instead you could render the other data, and use the Skeleton components in Polaris to show a loading phase for the tables/charts you’re retrieving data for.

Your frontend could us a lightweight Javascript framework like Alpine/jQuery to perform an API request that retrieves this data, then replaces the Skeleton components when your API has the data available.

Skeleton Page - Skeleton page — Shopify Polaris