I am experiencing an issue with the navigation menu in my Shopify app. When I navigate from the home page to another page, the home page reloads first before redirecting to the desired page. The same issue occurs when I navigate back to the home page.
Below is the navigation menu code I am using in my PHP-based Shopify app:
Experimenting the exact same issue here but with the Shopify Remix Template. I was able to reproduce the behavior in the just cloned template with the following navigation:
Hi, I had the same “page flicker” issue and my inspect suggests this is actually a transition animation instead of page reload. Can you try to inspect your DOM update and see if we are the same?
@Liam-Shopify We are still experiencing this issue and cannot pass our BFS yearly checkup because of this.
This is what we get in the checkup:
We are encountering an issue when navigating through the app where the current page will flicker before redirecting. Please see this screencast for an example. One option here could be to use a loading page, such as a skeleton page or a blank page with a spinner icon.
Can we skip this step as It’s an issue from Shopifys end ?
By default, defining ui-nav-menu with anchor tag will behave as standard MPAs (multiple page apps). You should handle click event and navigation yourself to prevent the full page reload. Something like
function handleNavigation(event) {
if (!(event.target instanceof HTMLAnchorElement)) return;
event.preventDefault();
event.stopPropagation();
customNavigateDependingOnFramework(event.target.pathname);
}
document.addEventListener('click', handleNavigation);
@Henry_Tao, as far as I understand, I don’t believe that is the issue.
These are cases of MPAs where a full page reload is needed. The issue is that before the redirect happens, the side nav does a flicker on the client side that looks like you moved to the new page, but it shows the current one. Then full page load kicks in and loads the new one. This has been ongoing since January 24th, the first time I noticed it.
An ugly temporary workaround is to do something like this:
This intercepts the click and prevents the flickering by allowing you to show a fake loading spinner or whatever you want. Not pretty, but better than the current experience.
@oribenez, this has nothing to do with React. Client-side routing with React is fine.
Hi @Henry_Tao this code doesn’t appear to work as of today. I end up with both a document request to the new route and the embedded and hmac url parameters as well as a fetch to the route with a Bearer token
<script>
// https://community.shopify.dev/t/issue-with-navigation-menu-reloading-before-redirecting/7435
document.addEventListener('click', (event) => {
// only handle clicks on links within the ui-nav-menu, rest can use wire:navigate
console.log('click event', event.target, event.target.closest('ui-nav-menu'));
if (!event.target.closest('ui-nav-menu')) return;
console.log('preventing default navigation');
event.preventDefault();
event.stopPropagation();
Livewire.navigate(event.target.pathname);
});
</script>
When I use on page links outside of ui-nav-menu I only see fetch requests and no flashing of the screen: ui-nav-menu click → blank screen → flashes old screen → flashes in new screen. The flashing happens with the Shopify Email app so I assume that is an ongoing issue unrelated to double loading?
