Embedded POS App gets into an infinite loading state when navigating

App Bridge
1

Hello,

My POS embedded app started to get into an infinite loading state in Android, starting Shopify POS version 9.26.2.

I’m using express nodejs template migrated to AppBridge v4.

My dependencies are:
“@shopify/app-bridge-react”: “^4.1.7”,
“@shopify/app-bridge-types”: “^0.0.17”,
“@shopify/polaris”: “^12.20.0”,
“react”: “18.3.1”,
“react-barcode”: “^1.4.6”,
“react-dom”: “18.3.1”,
“react-query”: “^3.39.3”,
“react-router-dom”: “^7.3.0”

Dev dependencies:
“vite”: “^6.2.2”,
“@vitejs/plugin-react”: “^4.3.4”,

The (simplified) code being used is:

import { BlockStack, InlineStack, Page, Pagination, Range } from "@shopify/polaris";
import { useNavigate } from "react-router-dom";

export default function ReceiveInventoryIndex() {
  const navigate = useNavigate();
  ...
  return (
      <Page
        title="Devolución de Mercancía"
        subtitle="Devuelve inventario a almacén"
        backAction={{ onAction: () => navigate('/') }}
        primaryAction={{
          content: "Nueva Devolución",
          disabled: !isUsingPOS,
          onAction: () => navigate("/inventory/return/edit")
        }}
      >
      ...
      </Page>
  );
}

Loading state after clicking a button with useNavigate:

image
image1908×1061 14.9 KB

Video:

2

We are having the same issue, though it’s on embedded apps. Suddenly started about 1-2 days ago.

3

Hi Alejandro,

Is this happening when you install the app, or just when you open the UI?

4

Hi @Liam-Shopify
Thanks for the response.

This is an app that has been installed for very long in the store. It happens randomly when navigating from one page to another using the react-router-dom useNavigate hook.

Sometimes it happens in the first navigation, sometimes in the second. I looked into logs using edge://inspect and it happens after this action:

*Removed sensible data from logs

{
    "group": "Navigation",
    "type": "APP::NAVIGATION::HISTORY::REPLACE",
    "payload": {
        "path": "/inventory/return/edit"
    },
    "clientInterface": {
        "name": "app-bridge-cdn",
        "version": "1"
    },
    "version": "1",
    "source": {
        "apiKey": "XXXXXXXXXXX",
        "appOrigins": [],
        "debug": {},
        "disabledFeatures": [],
        "experimentalFeatures": [],
        "locale": "es",
        "host": "ZmlrLWNoZWNrb3V0ZXh0LXByZXZpZXcubXlzaG9waWZ5LmNvbS9hZG1pbg",
        "shop": "XXXXXXXXXXX.myshopify.com"
    }
}

In the debug, you can see that the app is open, but the loader screen is on top in an infinite loading loop:

image
image3581×1082 321 KB

5

Hi Alejandro,

Thanks for sharing these code snippets and details - I’ve connected with our internal team to dig into this more. Will let you know what I hear back.

6

Thanks, @Liam-Shopify

Take into account that this bug was introduced in version 9.26.2. It doesn’t happen in 9.22. And as far as I’m aware, it’s only happening in Android Shopify POS app. In IOS is fine.

7

Hi @Liam-Shopify

Any news from the team about this navigation issue on Android?

8

This seems surprisingly similar to an issue I am also having. I’m presuming by the console screenshots you included that this is happening on your development preview?

Also, does the infinite loading ever result in an error, or does it stay in the loading state indefinitely?

9

Hi @fletchStacey

The screenshot is from my development preview just for the logs, but clients have reported this issue in a Shopify production store.

The loading state is infinite. I’ve waited for a long time, and there is no error at any point.

10

Hi @Liam-Shopify

This is still happening. I updated to v10.0.0 on Android, and it is still an issue. Is the team doing something to fix this? The lack of feedback for 28 days is not encouraging.

11

Are you using the latest App Bridge? as mentioned in the docs Embed your app in POS

Can you attach the debugger to see if there are any errors throw that may help identify the issue? Debugging

12

Hi @JordanFinners

Yes. If you see my initial post, I was using the last version, debugged and share debugging information, image and video of the error.

I updated from:
“@shopify/app-bridge-react”: “^4.1.7”,
“@shopify/app-bridge-types”: “^0.0.17”,

to:
“@shopify/app-bridge-react”: “^4.1.8”,
“@shopify/app-bridge-types”: “^0.0.18”,

Since they updated the versions 2 weeks ago.
However, the same issue has occurred, and there has been no feedback from the Shopify team for a month.

13

Sorry, shouldn’t have skim read. I mean for App Bridge are you using the CDN hosted one? You’ll need that as well as the node dependencies.
Just checking through my debug checklist :slight_smile:

14

Yes, I’m using the CDN one.

<script src="https://cdn.shopify.com/shopifycloud/app-bridge.js"></script>

15

I have spent hours and days debugging this and I think I found a hack to make it work since this is an Android code issue from Shopify.

It seems the “loading” state in Android gets unsync. I receive that loading variable is false, but the loading screen is visible. The only way of fixing this is using the shopify global variable to set loading to true and then to false again.

So I’m doing this:

const app = useAppBridge();
app.loading(true);
app.loading(false);

Only doing app.loading(false); doesn’t work since it’s already false. It has to be set to true and then false again.

This is a hack. The issue is still there for Shopify to solve @Liam-Shopify.

1 Like
16

Great find @alejandro :fire: debugging!

1 Like