search

TylerBarnes / gatsby-plugin-transition-link

A link component for page transitions in gatsby
537 stars 70 forks source link

AniLink causes flicker when theme changed on page transition #179

Closed ajayns closed 4 years ago

ajayns commented 4 years ago

When transitioning between pages, the theme is changed. During the transition the entering page has the theme right, but once the transition is completed, momentarily (<1s) the page returns to the initial theme and comes back to actual set theme.

Basically like how the theme change transition should work in https://gatsby-plugin-transition-link.netlify.com but after the transition to dark mode, it flickers for a moment into light mode and then goes back dark.

TylerBarnes commented 4 years ago

@ajayns are you able to share a repro so I can debug? That would be super helpful!

ajayns commented 4 years ago

My own repo could be a bit complex to debug, so I'll strip it and make a sandbox hold up

ajayns commented 4 years ago

Here you go: https://codesandbox.io/s/busy-golick-udg6q

Looking at the simplified version I think it could be something to do with createGlobalStyle from styled-components but I'm still unsure on how to approach this problem.

Thanks for the quick response @TylerBarnes :) Absolutely love your package!

ajayns commented 4 years ago

Update: I managed to get it running by moving the theming styles from GlobalStyles to a separate component that targets all children. Then the flixker doesn't seem to occur.

TylerBarnes commented 4 years ago

Yep, I've seen this before too. I couldn't figure out how to fix it, I think it's a problem in the GlobalStyles function. Another solution is to put your styles into a css file or module outside of Styled Components.