Issue with Navigation Menu Reloading Before Redirecting

App Bridge
1

Hello,

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:

<ui-nav-menu>
    <a href="/view/index.php">Home</a>
    <a href="/view/plan.php">Plan</a>
</ui-nav-menu>

To better illustrate the issue, I have recorded a short video:

Could you please help me understand why this is happening and how I can resolve it?

Thank you.

1 Like
2

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:

Home Test01 Test02 Test03

Each page just contains a loader with a timeout

3

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?

Please take a look at my post

4

Hey folks!

Thanks for flagging this issue - the app bridge team will look into this.

5

Hi Liam. Do you have any updates on this? Our app also refreshes first before it navigates to another page.

6

Hi Aras,

It does look like it’s still an open issue with us - will connect with the team working on this.

1 Like
7

Hi Liam, is there any update on the issue I am currently facing in my Next.js app?

8

@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:

  1. 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 ?

9

We are getting the same issue. It would be great to get this resolved!

10

Same issue here, looking forward to getting this sorted! :crossed_fingers:

11

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);
12

Hi Uttam,

My Navbar page is working good when I use “Link” component
Maybe try this:

import { NavMenu } from '@shopify/app-bridge-react'
import { useTranslation } from 'react-i18next'
import { Link } from 'react-router-dom'

const Navbar = () => {
  const { t } = useTranslation()
  return (
    <NavMenu>
      <Link to="/" rel="home">
        {t('NavigationMenu.dashboard')}
      </Link>
      <Link to="/analytics">{t('NavigationMenu.analytics')}</Link>
      <Link to="/settings">{t('NavigationMenu.settings')}</Link>
    </NavMenu>
  )
}

export default Navbar
13

@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 flickering 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:

document.querySelector('ui-nav-menu').addEventListener('click', (event) => {
   if (event.target.nodeName === 'A') && event.target.href.includes('/your-side-nav-links')) {
      const mainScreen = document.getElementById('your-main-dom-element');
      if (mainScreen) mainScreen.innerHTML = '<div class="spinner"></div>';
   }
});

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.