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

[oliverlangan]

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:

• set up two route with namespaced styles
  • (make the styles of the routes highly visible)
• add a link from the first to the second route
• to the second route
  • add a loading action
  • introduce a delay when loading the model (via setTimeout or otherwise)
• load the app to the first route
• click the link to the second route

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]

@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]

@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]

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. 😞