Bug: App Bridge <s-app-window> stuck in infinite spinner on cancelled browser reload

App Bridge
1

Hey Shopify team,

I’m running a Nuxt 4 app using the App Bridge web components. We are seeing a critical UI trap when using the data-save-bar attribute inside an <s-app-window>.

The Issue:

  1. A merchant makes a change in a form (triggering the save bar).

  2. They accidentally hit the browser’s refresh button.

  3. The browser shows its native “Leave site? Changes you made may not be saved” prompt.

  4. The merchant clicks Cancel.

At this point, the <s-app-window> hides the app and overlays a permanent <ui-spinner>. Because the page reload was cancelled, the app is still running, but the Shopify wrapper never removes the spinner. The merchant is locked out of the interface and forced to do a hard refresh anyway.

Our Basic Code Setup:

HTML

<script setup lang="ts">
definePageMeta({ layout: 'window' })
useHead({ title: 'Product Editor' })
</script>

<template>
  <s-page heading="Product editor">
    <form id="settings-form" data-save-bar>
      <s-text-field label="Product title" name="productTitle"></s-text-field>
      <s-text-area label="Description" name="description"></s-text-area>
    </form>
  </s-page>
</template>

(Called via <s-app-window id="product-editor-window" src="/product-editor"></s-app-window>)

image
image1920×820 24.1 KB

image
image2887×1297 134 KB

image
image1920×820 19.5 KB

Is this a known bug with the web components, and is there a fix on the way?

Thanks,

Kamran

2

@Alan_G @Liam-Shopify could anyone of you please take a look at this issue when you have a chance?

We’re ready to launch our app, and this is the only remaining blocker. Any help or update would be greatly appreciated.
Thanks!

3

Hey @Kamran_Khan - thanks for the detailed repro here. Happy to help with this, but just wanted to note, it is generally against the community’s rules to tag specific people without them already being engaged in the conversation with you (more info on that here), but no worries on this one.

That said, this does look like an App Bridge s-app-window / save bar issue rather than an issue with your basic setup from what I can tell. The expected behaviour is that data-save-bar protects unsaved changes before exit, but in this reload-cancel flow the window appears to stay in its loading state instead of restoring the iframe.

I’m going to raise this internally, but could you share:

  • the App Bridge script/package version you’re using
  • browser + OS
  • whether this reproduces in a minimal app route outside your production app
  • a small repro repo or short screen recording if you have one (let me know if you’d rather set up a DM for this and I can get that set up)

Hope to hear from you soon!

4

Hey @Alan_G,

Thanks for getting back to me, and my sincere apologies for the direct tag! To give a little context, a teammate of mine posted about another App Bridge related issues over a month ago that unfortunately didn’t get any traction. Since this current bug is the absolute final blocker keeping us from launching our app, I tagged you out of a bit of desperation to make sure it didn’t get buried. I completely understand the rule, though, and will keep it in mind moving forward. Thank you for stepping in to help!

Here are the details to help raise this internally:

  • App Bridge version: Loaded via the global CDN script: [https://cdn.shopify.com/shopifycloud/app-bridge.js]

  • Browser + OS: Google Chrome running on Ubuntu.

  • Minimal app route: Yes, this reproduces completely outside of our production environment. The code snippet and screenshots I shared previously are from a barebones, isolated Nuxt 4 test app (bfs-nuxt4-app) used specifically to isolate this bug. After your message, I set up another app and made the bare minimum changes to make App Bridge work with a form, and I was able to replicate the issue there as well.

  • Repro/Recording: Here is a short screen recording showing the exact stalled state along with my project setup: https://www.awesomescreenshot.com/video/53253278?key=b62989c350a34d61b9d5e47d462777b1. I’d also be happy to share access to the minimal reproduction repo if the internal team needs to test the code directly.

Thanks again for escalating this. Let me know if you need anything else from my end.

Best,
Kamran

5

Thanks @Kamran_Khan - I’ll take a look into this further, I appreciate the extra info here!