Polaris Frame has a weird transition flicker when using the Navigation Menu in my embedded app

App Bridge
1

Hi everyone,

I’m developing an embedded Shopify app using Next.js and @shopify/app-bridge-react v3. I’ve noticed a visual “flicker” or transition animation whenever I click on links in the Navigation Menu. Inspecting the DOM shows that the parent container (within the Shopify Admin) — specifically a div with classes like Polaris-Frame_Scrollable — is being re-rendered or updated with transition CSS classes. This creates a noticeable “page flicker” or brief animation on navigation.

if I don’t click the navigation menu links and instead programmatically dispatch a redirect action, the outer Polaris frame container does not change and there’s no visible transition. That suggests the Navigation Menu might be doing extra work beyond a simple redirect.

Apparently, this is the behavior of Shopify Admin frontend and I have no control over it. BUT I’ve tested some other embedded apps, and they don’t exhibit this transition, I wonder how do they workaround with it?

I’ve taken several screenshots for the DOM update, hoping it would provide necessary context.

This is the nav menu link transition on my app, you can see there is an extra _loading_xxx css class added, causing the page flickers. At the end of the transition, this div gets updated as well.

1
11920×696 152 KB

2
21920×696 142 KB

3
31920×696 146 KB

However, this is not the case in some other apps, the div simply adds some inline styles and then gets removed when transition ends.

other1
other11920×737 142 KB

1 Like
2

Hi Haozhongzheng

We’re looking into this as part of this issue Issue with Navigation Menu Reloading Before Redirecting - #3 by haozhongzheng

3

There is a GitHub issue for this issue already.
You can find some solutions.

4

Thanks for your reply @remy727 . However we’re using app bridge v3 right now, migrating to v4 may refactor a lot of things. I hope shopify dev staff could locate the problem first so we can decide if v4 is really necessary.

5

Hi @haozhongzheng - It does look like this is a regression of this issue: App Bridge 4 clicking on Navigation Menu causes app reload · Issue #240 · Shopify/shopify-app-bridge · GitHub

Our team are still investigating, will update as soon as I hear more.

6

I have the same exact problem with App Bridge 4
In my case I have a rails + hotwire app. Since I don’t want the links to make a full-page reload, this is how I handle the navigation from the ui-nav-menu component:

// <ui-nav-menu data-controller="navigation">

export default class extends Controller {
  connect() {
    const links = this.element.querySelectorAll("a");

    links.forEach((link) => {
      link.addEventListener("click", this.#handleClick);
    });
  }

  #handleClick(event) {
    event.preventDefault();
    Turbo.visit(event.currentTarget.href);
  }
}

Also, on firefox you cannot see this transition since view-transition-name is not supported there

7

Hi @Liam-Shopify

Any news here?

1 Like
8

Hi folks,

Our team are still working on this issue - no update to share yet.

9

FYI after weekends i’m not facing the problem, idk what they did but now it works for me