fix(loading-route-styleNamespaces): we needed to hack around and add in some extra hooks to take care of loading routes

Author: webark

addon/initializers/route-styles.js

@@ -6,8 +6,17 @@ import initRouteStyles from '../utils/init-route-styles';
 Router.reopen({
   didTransition(routes) {
     this._super(...arguments);
-    initRouteStyles(getOwner(this), routes);
-  }
+    initRouteStyles(getOwner(this), routes.map(route => route.name));
+  },
+
+  intermediateTransitionTo() {
+    this._super(...arguments);
+    const routes = this._routerMicrolib.currentHandlerInfos;
+    const routeNames = routes.map(route => route._handler.routeName.replace(/_loading$/, '-loading'))
+
+    initRouteStyles(getOwner(this), routeNames);
+  },
+
 });
 
 export function initialize() {}

addon/instance-initializers/route-styles.js

@@ -4,24 +4,28 @@ import initRouteStyles from '../utils/init-route-styles';
 export function initialize(appInstance) {
   let router = appInstance.lookup('service:router');
   router.on('routeDidChange', function(transition) {
-    let routeInfos = [];
-    let to = transition.to;
-
-    while (to) {
-      routeInfos.push(to);
-      to = to.parent;
-    }
-
-    routeInfos.reverse();
+    initRouteStyles(appInstance, nestedRouteNames(transition.to));
+  });
 
-    if (routeInfos.length === 0) {
-      routeInfos = transition.routeInfos;
+  router.on('routeWillChange', function(transition) {
+    if (/_loading$/.test(transition.to.name) && transition.isActive) {
+      const routeNames = nestedRouteNames(transition.to)
+        // loading route names are set with an _loading even though
+        // their path is -loading
+        .map(name => name.replace(/_loading$/, '-loading'));
+      initRouteStyles(appInstance, routeNames);
     }
-
-    initRouteStyles(appInstance, routeInfos);
   });
 }
 
+function nestedRouteNames(route, routeNames = []) {
+  routeNames.push(route.name);
+  if (route.parent) {
+    return nestedRouteNames(route.parent, routeNames);
+  }
+  return routeNames;
+}
+
 export default {
   initialize
 };

addon/utils/init-route-styles.js

@@ -1,16 +1,18 @@
 import podNames from 'ember-component-css/pod-names';
 
-export default function initRouteStyles(owner, routes) {
+export default function initRouteStyles(owner, routeNames) {
   const classes = [];
-  for (let i = 0; i < routes.length; i++) {
-    let route = routes[i];
-    let currentPath = route.name.replace(/\./g, '/');
+  for (let i = 0; i < routeNames.length; i++) {
+    const routeName = routeNames[i];
+    const styleNamespace = podNames[routeName.replace(/\./g, '/')];
 
-    if (podNames[currentPath]) {
-      owner
-        .lookup(`controller:${route.name}`)
-        .set('styleNamespace', podNames[currentPath]);
-      classes.push(podNames[currentPath]);
+    if (styleNamespace) {
+      classes.push(styleNamespace);
+
+      const controller = owner.lookup(`controller:${routeName}`);
+      if (controller) {
+        controller.set('styleNamespace', styleNamespace);
+      }
     }
   }
 

tests/acceptance/loading-state-test.js

@@ -0,0 +1,23 @@
+import { test } from 'qunit';
+import moduleForAcceptance from '../../tests/helpers/module-for-acceptance';
+import { scheduleOnce } from '@ember/runloop';
+
+moduleForAcceptance(`Acceptance | Unique Paths`);
+
+test('loading state is styled', function(assert) {
+  visit(`/loading-state/base`);
+
+  andThen(function() {
+    click(find('a'));
+    assert.equal(find('h1').css('color'), 'rgb(0, 0, 14)');
+
+    scheduleOnce('afterRender', function() {
+      assert.equal(find('h2').css('color'), 'rgb(1, 0, 13)');
+    });
+
+  });
+
+  andThen(function() {
+    assert.equal(find('h3').css('color'), 'rgb(0, 0, 13)');
+  })
+});

tests/dummy/app/loading-state/base/styles.scss

@@ -0,0 +1,3 @@
+h1 {
+  color: rgb(0, 0, 14);
+}

tests/dummy/app/loading-state/base/template.hbs

@@ -0,0 +1,2 @@
+<h1> base </h1>
+{{link-to "waiting" "loading-state.waiting"}}

tests/dummy/app/loading-state/waiting-loading/styles.scss

@@ -0,0 +1,3 @@
+h2 {
+  color: rgb(1, 0, 13);
+}

tests/dummy/app/loading-state/waiting-loading/template.hbs

@@ -0,0 +1 @@
+<h2> loading </h2>

tests/dummy/app/loading-state/waiting/route.js

@@ -0,0 +1,9 @@
+import Route from '@ember/routing/route';
+import { later } from '@ember/runloop';
+import RSVP from 'rsvp';
+
+export default Route.extend({
+  model() {
+    return new RSVP.Promise(resolve => later(resolve, 500));
+  }
+});

tests/dummy/app/loading-state/waiting/styles.scss

@@ -0,0 +1,3 @@
+h3 {
+  color: rgb(0, 0, 13);
+}