Gatsby: Menu icon flashing when clicked. Is it possible to stop this?

[DevelopwithTom]

I have set up a sidebar that upon hovering, reveals the menu item name. The menu item also goes green when the user goes on that particular page. I am using Gatsbys 'Link to=' to link these pages.

The problem is that upon clicking the menu item, the icon flashes for a split second (see gif). I would like to stop this from happening and just have the text turn green with no flash of the icon.

I was wondering if anybody had any suggestions as to how I could make this stop happening? I have tried all the CSS styling options possible and cannot stop it. I have used Gatsbys 'activeClassName=' with alternative CSS but to no avail. I think this is a problem with the 'Link to' rendering rather than my CSS?

My menu button JS:

<div class="sidebar_button">
  <Link to="/about" activeClassName="user-link active">
    <i>
     <FiUser size={22} className="user-icon" />
    </i>
    <p className="user-text">ABOUT</p>
  </Link>
</div>

My CSS:

.sidebar_button p {
  opacity: 0;
  -webkit-transition: all 1s ease 0s;
  -moz-transition: all 1s ease 0s;
  -o-transition: all 1s ease 0s;
  transition: all 1s ease 0s;
}

.sidebar_button a i {
  -webkit-transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: 25px;
  margin: auto;
}

.sidebar_button a:hover p {
  opacity: 1;
  -webkit-transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
}

.sidebar_button a:hover i {
  opacity: 0;
  -webkit-transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
}

Thank you for your help 👍

[wardpeet]

Hi, do you mind putting your code somewhere on github so we can have a look at it? It probably has to do something with your css and not gatsby itself. We are happy to assist.

[DevelopwithTom]

Thanks a lot for the quick reply wardpeet. Thats really kind of you. I've just made the code public.

https://github.com/DevelopwithTom/portfolio_site

A couple of frontend react devs had a play around with the CSS and, like me, couldn't get it to work so thats why I'm thinking it might be a 'Link to' issue? But thats a guess.

I'd be really interested in hearing your thoughts on it!

[DevelopwithTom]

I forgot, if it helps:

This is a similar sidebar working on someone elses site without the icons flashing when being clicked

[jameesy]

I deployed the site to Netlify:

https://lucid-swartz-53a9b2.netlify.com/

And could find nothing wrong with it! The icons seem to be working absolutely fine to me 💯

[DevelopwithTom]

The icons work to bring you to a new page but the text flashes with the icon when clicked (see gif). I'm trying to make it so the the icon doesn't flash when its clicked (like this).

I have tried doing this through the CSS route but can't. I think it must be caused by rendering via 'Link to' - but I'm not sure. I haven't found a solution to this yet. It would be good to get your thoughts on it?

[jameesy]

Ahh my bad, I didn't realize clicking was involved!

I'll have a look into it and see what I can find.

[DevelopwithTom]

Thanks very much JA. Its been puzzling me for a while - it would be great to get an opinion on it from someone more experienced 👍

[jameesy]

Ok, I'm pretty sure I know what is causing this.

When the new page is being rendered, it's rendering a new sidebar, which is taking a split second to recognise it is being hovered over.

I have run out of time this evening but might have half an hour to have a play with this tomorrow if you haven't found a solution by then.

[DevelopwithTom]

Oh yeah ok, that would be awesome - I'm more than happy to make a little donation your way for your time too

[wardpeet]

You'll have to use gatsby-plugin-layout to fix this. The problem is like @JABedford mentioned that we rerender the sidebar on navigation because of how routing works in gatsby. By using gatsby-plugin-layout, we are able to put our layout at the root of our page instead of inside our routing logic.

for more info:
https://www.gatsbyjs.org/packages/gatsby-plugin-layout/#why-would-you-want-to-reimplement-the-v1-layout-behavior

fix:
https://github.com/DevelopwithTom/portfolio_site/pull/1

[DevelopwithTom]

That makes sense! That works perfectly! Thank you for looking into this wardpeet!