Merge pull request #6286 from kevinansfield/fix-slow-post-navigation

Fix posts navigation slowdown when lots of posts are loaded

core/client/app/components/gh-posts-list-item.js

@@ -1,14 +1,14 @@
 import Ember from 'ember';
+import ActiveLinkWrapper from 'ghost/mixins/active-link-wrapper';
 
 const {$, Component, computed, inject} = Ember;
 const {alias, equal} = computed;
 
-export default Component.extend({
+export default Component.extend(ActiveLinkWrapper, {
     tagName: 'li',
-    classNameBindings: ['active', 'isFeatured:featured', 'isPage:page'],
+    classNameBindings: ['isFeatured:featured', 'isPage:page'],
 
     post: null,
-    active: false,
     previewIsHidden: false,
 
     isFeatured: alias('post.featured'),

core/client/app/mixins/active-link-wrapper.js

@@ -0,0 +1,32 @@
+// logic borrowed from https://github.com/alexspeller/ember-cli-active-link-wrapper/blob/master/addon/components/active-link.js
+
+import Ember from 'ember';
+
+const {computed, run} = Ember;
+const emberA = Ember.A;
+
+export default Ember.Mixin.create({
+
+    classNameBindings: ['active'],
+
+    childLinkViews: [],
+
+    active: computed('childLinkViews.@each.active', function () {
+        return emberA(this.get('childLinkViews')).isAny('active');
+    }),
+
+    didRender() {
+        this._super(...arguments);
+
+        run.schedule('afterRender', this, function () {
+            let childLinkElements = this.$('a.ember-view');
+
+            let childLinkViews = childLinkElements.toArray().map((view) =>
+                this._viewRegistry[view.id]
+            );
+
+            this.set('childLinkViews', childLinkViews);
+        });
+    }
+
+});

core/client/app/templates/posts.hbs

@@ -11,7 +11,7 @@
         {{#gh-infinite-scroll-box tagName="section" classNames="content-list-content js-content-scrollbox" fetch="loadNextPage"}}
             <ol class="posts-list">
                 {{#each sortedPosts key="id" as |post|}}
-                    {{#gh-posts-list-item post=post active=(is-equal post currentPost) onDoubleClick="openEditor" previewIsHidden=container.previewIsHidden as |component|}}
+                    {{#gh-posts-list-item post=post onDoubleClick="openEditor" previewIsHidden=container.previewIsHidden as |component|}}
                         {{#link-to component.viewOrEdit post.id class="permalink" title="Edit this post"}}
                             <h3 class="entry-title">{{post.title}}</h3>
                             <section class="entry-meta">