How do I get rid of UI Flicker?

[rexwreyes]

I am using the AppLayout and TopNavigation components in an NextJS Amplify App. When I click on any (they are all internal) link in the TopNavigation to goto a new page it looks like the css unloads and reloads. This happens on every page. Here is an example of it loading...

and loaded...

I notice on the AWS site (the sections that use cloudscape) that when you click on a link you get an overlay while things load and you don't get this flicker. how can I achieve this?

[connorlanigan]

It looks like your application might be performing a full page load when you navigate to a new page, instead of performing a client-side navigation only. You can specify handlers on the TopNavigation component that are called when a link in the TopNavigation is clicked:

• the object in the identity prop takes an onFollow field
• the objects in the utilities prop take an onFollow (for buttons) or onItemFollow (for menu dropdowns) field

In those handlers, you can then cancel the browser's full-page navigation and perform a client-side navigation using your framework's routing functionality. In NextJS, you should be able to use the useRouter hook (see the NextJS documentation) for that.
Something like this:

const router = useRouter();

return <TopNavigation
          identity={{
            href: '/',
            onFollow: e => {
              e.preventDefault();
              router.push('/');
            },
          }}
        />