Browser's progress bar not visible when I click on a link on my next.js (react) app

Question

I'm developping an app with Strapi as a backend and Next.js as a front-end.

In my frontend I have many links. They all are "syntaxed" like these exemples below. The problem is, on my browsers (Desktop and mobile) when I click on a link it doesn't show that the browser is charging the page but the page appears 2 seconds later. It will make an user think the website doesn't work.

How can I correct that ? It would be nice to have the probress bar /circle showing like this exemple:

Circle progress bar exemple on another website

<Box key={sectionPart.id} mx={20} className={`button button-${sectionPart.style}`}>
    <Link href={sectionPart.url} >
        <Box as="a">
            {sectionPart.title}
        </Box>
    </Link>
</Box>

        //snipet of menu navigation
    

<Link key={retrieveLinkId(link)} /*href={link.url}*/ href="/">
                                                    
       <a  className={router.pathname === retrieveLinkUrl(link) ? 'active' : ''}>
             <Flex justifyContent="start" className="featured-content" >

                  {/*** featured content Image **/}
                <Box className="link-featured-image-container">
                   <Image className="link-featured-image" 
                          src={retrieveLinkFeatureImg(link)} 
                          width={120} 
                          height={120} 
                    />
                 </Box>

                  {/*** featured content title & button  ***/}
                  <Box className="featured-content-links">
                     <Flex justifyContent="start" alignItems="start">
                        <p className="dropdown-section-item-title"> 
                          {retrieveLinkLabel(link)}
                        </p>
                     </Flex>

                     <Flex className="dropdown-section-cta" alignItems="flex-end">
                        <p>
                          {retrieveLinkFeatureBtn(link)}
                        </p>
                      </Flex>
                  </Box>

              </Flex>
          </a>
       </Link>

Thank you !

Answer 1

You can use, Nprogress to have a progress bar during route navigation. Place the code below in your root app file

import React from 'react';
import Router from 'next/router';
import App, { Container } from 'next/app';
import NProgress from 'nprogress';


Router.onRouteChangeStart = () => {
  NProgress.start();
};

Router.onRouteChangeComplete = () => {
  NProgress.done();
};

Router.onRouteChangeError = () => {
  // hanlde the rror
  NProgress.done();
};

See the configuration section in the NProgress readme for addition config, if you want to add more functionality to it