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.
However, this is not the case in some other apps, the div simply adds some inline styles and then gets removed when transition ends.
1 Like
There is a GitHub issue for this issue already.
You can find some solutions.
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.
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.
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
Hi folks,
Our team are still working on this issue - no update to share yet.
FYI after weekends i’m not facing the problem, idk what they did but now it works for me
I believe this issue is currently happening in our app as well.
We have a strictly back-end app. Sometimes, when navigating to a different page using the sidebar menu, the current page will fade to gray, and then back to fully visible again before the destination page is finally shown. It creates a “flicker” effect.
It doesn’t always happen, and might be related to page load speed. But it happens with page loads less than 500ms. So, not sure if there’s a cutoff.
The general “fade to gray” is fine. The issue is that before the next page is shown, the current page pops back in, which is unexpected.
Here is a video that shows the issue in slow-motion. In the video, I start on the “Code Reference” page and click on the home link to visit the “Workflows” page. You can see that the “Code Reference” page fades out, then pops back in, then finally the “Workflows” page loads.
@danatbonify Exact same behavior here. Unfortunately after a few months it’s still not been solved.
@Liam-Shopify do you have any further updates on this? I am seeing the same thing as described by the video from @danatbonify - and as you can imagine, it is pretty terrible 
Just like I him, I am using a mostly back-end rendered setup, but in NextJS App router.
