How do I get rid of UI Flicker? #2100
-
Beta Was this translation helpful? Give feedback.
Answered by
connorlanigan
Apr 2, 2024
Replies: 1 comment
-
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:
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 const router = useRouter();
return <TopNavigation
identity={{
href: '/',
onFollow: e => {
e.preventDefault();
router.push('/');
},
}}
/> |
Beta Was this translation helpful? Give feedback.
0 replies
Answer selected by
connorlanigan
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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:
identity
prop takes anonFollow
fieldutilities
prop take anonFollow
(for buttons) oronItemFollow
(for menu dropdowns) fieldIn 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.Someth…