Turbo router active menu indication flicker

[cecilia.ritta]

Hi, I’m experimenting for the first time with the turbo router, and I must say it’s pretty cool!!
But in my testing site I have a navigation menu that adds a class to the ‘active’ menu link to style it with a different color. Just like this:

<ul>
   <li><a class="nav-link { this.page.baseFileName == 'home' ? 'active' }}" href="{{ 'home'|page }}">Home</a></li>
   <li><a class="nav-link { this.page.baseFileName == 'contact-us' ? 'active' }}" href="{{ 'contact-us'|page }}">Contact Us</a></li>
</ul>

And I set a css different color for the .active class. But the color indication flickers a couple of times after every page change. I’d like to know if there’s something I have to take into sonsideration that I’m missing to achieve a smoother effect.
Thanks!

[daft]

Hi @cecilia.ritta

The flickering can sometimes happen from the Developer Tools in the browser, since the cache is disabled it will reload assets.

If you close the developer tools, does it still happen?

[cecilia.ritta]

Hi, thank you for your answer. It also happens with developer tools closed. But, I’ve been investigating a little more and it’s not a problem of that class (.active) being applied or not. In fact, in my site’s main menu, the links have a distinct on hover color. So when you click on a menu item (usually you leave the mouse pointer there), so when the new page loads the mouse pointer remains over the menu item and then the on hover event seems to activate/deactivate a couple of times until it stays “activated”. That’s why the color “flickers” until its stable. Really don’t know why.

[daft]

@cecilia.ritta

So when you click on a menu item (usually you leave the mouse pointer there), so when the new page loads the mouse pointer remains over the menu item and then the on hover event seems to activate/deactivate a couple of times until it stays “activated”

It happens because the DOM is being updated underneath the mouse pointer so it recalibrates in a flash.

One solution is to target the html[data-turbo-preview] selector to hold the state while the page loads. For example:

.menu-item:hover,
html[data-turbo-preview] .menu-item {
    // Hover effect
}

I’m not sure if this will exactly solve your issue, but it is a point in the right direction. The [data-turbo-preview] tag is added to the DOM when a content preview is showing and this is what can cause a flicker as the preview swaps for the latest content.

Related docs:

Turbo Router - October CMS - 3.x

[cecilia.ritta]

Thank you! Certainly it improved, from two flickers to one. But still the hover style disappears and reappears once (now it doesn’t look so odd). Just curious if that can be achieved though.
Also, I’m getting this error (not on first load but navigating to any other page):

[federico.schafer]

@cecilia.ritta

flickers to one. But still the hover style disappears and reappears once (now it doesn’t look so odd). Just curious if that can be achieved though.
Also, I’m getting this error (not on first load but navigating to any other page):

Sorry to get this late to this conversation, but the flicker might happen because there’s a syntax error in your ternary operators:
Please note that there’s an openning curly brace missing.

<li><a class="nav-link { this.page.baseFileName == 'home' ? 'active' }}" href="{{ 'home'|page }}">Home</a></li>