search

bencodezen / vue-enterprise-boilerplate

An ever-evolving, very opinionated architecture and dev environment for new Vue SPA projects using Vue CLI.
7.78k stars 1.32k forks source link

lazyLoadView(AsyncView) causes screen to flicker #86

Closed electricflannel closed 5 years ago

electricflannel commented 5 years ago

Hey there, I noticed that when I used the lazyLoadView() to load my routes, it seems to cause the screen to flicker. When the pages are cached it doesn't seem to be an issue. I tried capturing it in a .gif, but its to quick to record. Just wondering if its normal behavior?

Side note: I really appreciate this repo. Its been a great reference. Thank you for taking the time to set this up!

chrisvfritz commented 5 years ago

This is an unfortunate side effect of the more advanced lazy loading not yet being natively supported by Vue Router. It thinks the route resolves almost immediately due to the component we return with Promise.resolve, so unrenders the old route immediately, showing a blank page for up to 400ms, then showing the loading component if the route bundle still hasn't finished downloading in that time.

The best solution I know is to add a fade transition for routes. Let me know if that helps. 🙂

electricflannel commented 5 years ago

Ahh gotcha, that makes sense. I just wanted to make sure that this was expected behavior. Thank you!