Bugfix/lazy component loading states and fetching

[filrak]

Short description and why it's useful

• added ability to reload component when fetch fails
• added loading states for async sidebar components
• added error handling for offline/online errors

TODO

• add left sidebar support
• add custom width support
• refactor transitions
• add close button on failed load
• preload crucial async components
• add translation keys

Screenshots of visual changes before/after (if there are any)

(Failed loading - is offline)

(Failed loading - is online)

Component is loading

The solution is still dirty and needs polishment. Just leaving the WIP PR to mostly show screenshots :)

[pkarw]

This is pretty important fix and should be applied even when not polished. However - the Micorcart, Menu + Wishlist sidebars should be eagerly loaded for the offline mode - this is something i discussed with @patzick and there is a ticket for that. So I'd preffer to have them eagerly loaded this week and then think off what's left for this fancy loader You created here @filrak - we should have both!

[filrak]

It will be finished today. With this approach user will be able to refresh failed component just with one click (we can even try to do this automatically after connection is restored).

I'm not that a big fan of eager loading of this components. No matter if we have eager load or prefetch they still need to be downloaded anyway and in uncertain network conditions the bigger initial bundle is the worse for us.

What is the exact reason of eager load of this offscreen components?

@patzick ?

[pkarw]

Go to the product page, switch the internet off, add the product to the cart -try checking the cart status :) Good luck; at least for now ;)

That's the reason for eagerly loading the key components - just cart, wishlist + navigation.

@filrak

[filrak]

Ok, then this PR is prty useless in core functionalities. More like an additional feature

[pkarw]

We should have it + Microcart + navigation eagerly loaded. I really like this feature - let's merge it in

[filrak]

I added automatic reload of failed components when user cames back online

[pkarw]

Ok; fine with me

[filrak]

Done. I will improve some parts during stability phase (mostly purge unused css in in-sidebar components and props allowing to specify width of sidebar) but for now it works perfectly fine and solves the problem gracefully ;).

[patzick]

Really cool feature!
I'd just set default values for component props and changed passing functions as props to vue-styled emits.

[patzick]

It's okay for me, we should only reference to issues #2408, #2451

[patzick]

CR does not link issues so i need a separate comment - related issues #2408, #2451