Replace the add category class view mixin with a component

app/assets/javascripts/discourse/components/add-category-class.js.es6

@@ -0,0 +1,34 @@
+import { observes } from 'ember-addons/ember-computed-decorators';
+
+export default Ember.Component.extend({
+  _slug: null,
+
+  didInsertElement() {
+    this._super();
+    this.refreshClass();
+  },
+
+  _updateClass() {
+    if (this.isDestroying || this.isDestroyed) { return; }
+    const slug = this.get('category.fullSlug');
+    this._removeClass();
+    if (slug) {
+      $("body").addClass(`category-${slug}`);
+    }
+  },
+
+  @observes('category.fullSlug')
+  refreshClass() {
+    Ember.run.scheduleOnce('afterRender', this, this._updateClass);
+  },
+
+  _removeClass() {
+    $("body").removeClass((_, css) => (css.match(/\bcategory-\S+/g) || []).join(" "));
+  },
+
+  willDestroyElement() {
+    this._super();
+    this._removeClass();
+  }
+
+});

app/assets/javascripts/discourse/mixins/add-category-class.js.es6

@@ -1,27 +0,0 @@
-// Mix this in to a view that has a `categoryFullSlug` property to automatically
-// add it to the body as the view is entered / left / model is changed.
-// This is used for keeping the `body` style in sync for the background image.
-
-import Ember from "ember";
-const { on, observer } = Ember;
-
-export default {
-  _categoryChanged: on("didInsertElement", observer("categoryFullSlug", function() {
-    const categoryFullSlug = this.get("categoryFullSlug");
-
-    this._removeClass();
-
-    if (categoryFullSlug) {
-      $("body").addClass("category-" + categoryFullSlug);
-    }
-  })),
-
-  _leave: on("willDestroyElement", function() {
-    this.removeObserver("categoryFullSlug");
-    this._removeClass();
-  }),
-
-  _removeClass() {
-    $("body").removeClass((_, css) => (css.match(/\bcategory-\S+/g) || []).join(" "));
-  },
-};

app/assets/javascripts/discourse/templates/navigation/category.hbs

@@ -1,3 +1,5 @@
+{{add-category-class category=category}}
+
 <section class='category-heading'>
   {{#if category.logo_url}}
     {{cdn-img src=category.logo_url class="category-logo"}}

app/assets/javascripts/discourse/templates/topic.hbs

@@ -1,4 +1,6 @@
+
 {{#if model}}
+  {{add-category-class category=model.category}}
   <div class="container">
     {{discourse-banner user=currentUser banner=site.banner overlay=hasScrolled hide=model.errorLoading}}
   </div>

app/assets/javascripts/discourse/views/navigation-category.js.es6

@@ -1,5 +0,0 @@
-import AddCategoryClass from 'discourse/mixins/add-category-class';
-
-export default Ember.View.extend(AddCategoryClass, {
-  categoryFullSlug: Ember.computed.alias('controller.category.fullSlug')
-});

app/assets/javascripts/discourse/views/topic.js.es6

@@ -1,10 +1,9 @@
-import AddCategoryClass from 'discourse/mixins/add-category-class';
 import AddArchetypeClass from 'discourse/mixins/add-archetype-class';
 import ClickTrack from 'discourse/lib/click-track';
 import Scrolling from 'discourse/mixins/scrolling';
 import { selectedText } from 'discourse/lib/utilities';
 
-const TopicView = Ember.View.extend(AddCategoryClass, AddArchetypeClass, Scrolling, {
+const TopicView = Ember.View.extend(AddArchetypeClass, Scrolling, {
   templateName: 'topic',
   topic: Ember.computed.alias('controller.model'),
 
@@ -18,7 +17,6 @@ const TopicView = Ember.View.extend(AddCategoryClass, AddArchetypeClass, Scrolli
   menuVisible: true,
   SHORT_POST: 1200,
 
-  categoryFullSlug: Em.computed.alias('topic.category.fullSlug'),
   postStream: Em.computed.alias('topic.postStream'),
   archetype: Em.computed.alias('topic.archetype'),