webark / ember-component-css

An Ember CLI addon which allows you to specify styles for individual components
MIT License
540 stars 115 forks source link

wrong namespaces added when route `loading` state is overridden via action #332

Open oliverlangan opened 5 years ago

oliverlangan commented 5 years ago

This is similar to, but separate from #286.

When the loading state of a route is overridden using the loading action as described in the Ember guides, the styles on the 'from' route will be unloaded before the transition takes place. This results in a FoUC (flash of unstyled content) until loading is complete.

Steps:

result: the first route's styles are unloaded (and presumably the second route's are loaded) during the loading state, while the first route remains visible.

note: In my experience, this only happens on the first transition between the two routes. You will have to reload the page to reproduce the issue again.

workaround: keep the route styles.css files, but use explicit class names (used in the route template) for styling. do not rely on the & {...} block.

I'll try to create a reduced test case to show the problem more clearly.

webark commented 5 years ago

@oliverlangan Hmm.. i’ve never actually uses a set of loading styles when overriding the “loading” action. I’m unsure if it loads even an intermediary route in this case.

oliverlangan commented 5 years ago

@webark you're right, it clearly doesn't. We added this so that we can put our own indicator on the page and not redraw the whole page. But the drawback is that even our custom indicator is not loaded when navigating to the page initially.

webark commented 5 years ago

I think your workaround is the only way you could probably do this since there is no route that is loaded to base a default class off of. 😞