Namespaces not applying during ember `loading` states

Having a strange issue where the styles don’t seem to apply to the route templates when they are in a loading state as described here:

https://guides.emberjs.com/v2.15.0/routing/loading-and-error-substates/

Not sure if I am doing something wrong but code looks roughly like:

<div class="{{styleNamespace}}__content">
...
</div>

Any components have their css namespace classes applied so it seems like whatever is hooking in to generate the namespace is not triggered until loading is complete.

[Turbo87]

the problem we’re seeing is this: when we access route foo.bar and bar has a loading template then even the class for the foo route will only be applied once bar has loaded (aka. the transition has finished)

this seems like a major caveat to using this addon with per-route style files and should at least be mentioned in the README if we can’t find a solution.

---

after writing the above lines I experimented a bit and I think I might have found a solution. instead of using the regular route style assignment code I’m using this:

Route.reopen({
  activate() {
    this._super(...arguments);

    let applicationController = getOwner(this).lookup('controller:application');

    let activeRoutes = applicationController.activeRoutes.slice();
    activeRoutes.push(this.routeName);

    applicationController.set('activeRoutes', activeRoutes);
  },

  deactivate() {
    this._super(...arguments);

    let applicationController = getOwner(this).lookup('controller:application');

    let activeRoutes = applicationController.activeRoutes.slice();
    let index = activeRoutes.indexOf(this.routeName);
    activeRoutes.splice(index, 1);

    applicationController.set('activeRoutes', activeRoutes);
  },
});

and the application controller looks like this:

import Controller from '@ember/controller';
import { computed } from '@ember/object';
import podNames from 'ember-component-css/pod-names';

export default Controller.extend({
  routeStyleNamespaceClassSet: computed('activeRoutes', function() {
    return this.activeRoutes
      .map(routeName => podNames[routeName.replace(/\./g, '/')])
      .filter(Boolean)
      .join(' ');
  }),

  init() {
    this._super(...arguments);
    this.set('activeRoutes', []);
  },
});

caveat: this workaround does not assign the styleNamespace to controllers yet. we don’t use that feature so I didn’t care much about it. it should be possible to implement that part too though.

[webark]

@Turbo87 I just released a 0.7.4 and I am using it with error and loading states. do you have any more info into how you are setting up the loading state, and how you are getting there?