diff --git a/app/assets/javascripts/discourse/controllers/topic.js.es6 b/app/assets/javascripts/discourse/controllers/topic.js.es6
index 8a7548bc05d..2f1adf877f2 100644
--- a/app/assets/javascripts/discourse/controllers/topic.js.es6
+++ b/app/assets/javascripts/discourse/controllers/topic.js.es6
@@ -144,6 +144,8 @@ export default Ember.Controller.extend(SelectedPostsCount, BufferedContent, {
 
       if (lastLoadedPost && lastLoadedPost === post) {
         postStream.appendMore().then(() => refresh());
+        // show loading stuff
+        refresh();
       }
     },
 
diff --git a/app/assets/javascripts/discourse/lib/keyboard-shortcuts.js.es6 b/app/assets/javascripts/discourse/lib/keyboard-shortcuts.js.es6
index 968665045bf..c83d2f9cbc6 100644
--- a/app/assets/javascripts/discourse/lib/keyboard-shortcuts.js.es6
+++ b/app/assets/javascripts/discourse/lib/keyboard-shortcuts.js.es6
@@ -228,7 +228,7 @@ export default {
         // TODO: Use ember closure actions
         const result = topicController._actions[action].call(topicController, post);
         if (result && result.then) {
-          this.appEvents.trigger('post-stream:refresh', selectedPostId)
+          this.appEvents.trigger('post-stream:refresh', selectedPostId);
         }
       }
     }
diff --git a/app/assets/javascripts/discourse/templates/post-placeholder.hbs b/app/assets/javascripts/discourse/templates/post-placeholder.hbs
deleted file mode 100644
index 936863f191e..00000000000
--- a/app/assets/javascripts/discourse/templates/post-placeholder.hbs
+++ /dev/null
@@ -1,13 +0,0 @@
-<article class='placeholder'>
-  <div class='row'>
-    <div class="topic-avatar">
-      <div class='placeholder-avatar'></div>
-    </div>
-
-    <div class='topic-body'>
-      <div class='placeholder-text'></div>
-      <div class='placeholder-text'></div>
-      <div class='placeholder-text'></div>
-    </div>
-  </div>
-</article>
diff --git a/app/assets/javascripts/discourse/views/post-placeholder.js.es6 b/app/assets/javascripts/discourse/views/post-placeholder.js.es6
deleted file mode 100644
index d73c6ce7546..00000000000
--- a/app/assets/javascripts/discourse/views/post-placeholder.js.es6
+++ /dev/null
@@ -1 +0,0 @@
-export default Ember.View.extend({ templateName: 'post-placeholder' });
diff --git a/app/assets/javascripts/discourse/widgets/post-placeholder.js.es6 b/app/assets/javascripts/discourse/widgets/post-placeholder.js.es6
new file mode 100644
index 00000000000..f12fb26f34c
--- /dev/null
+++ b/app/assets/javascripts/discourse/widgets/post-placeholder.js.es6
@@ -0,0 +1,17 @@
+import { createWidget } from 'discourse/widgets/widget';
+import { h } from 'virtual-dom';
+
+export default createWidget('post-placeholder', {
+  tagName: 'article.placeholder',
+
+  html() {
+    return h('div.row', [
+             h('div.topic-avatar', h('div.placeholder-avatar')),
+             h('div.topic-body', [
+                h('div.placeholder-text'),
+                h('div.placeholder-text'),
+                h('div.placeholder-text')
+               ])
+           ]);
+  }
+});
diff --git a/app/assets/javascripts/discourse/widgets/post-stream.js.es6 b/app/assets/javascripts/discourse/widgets/post-stream.js.es6
index f2d3b69d822..2dc7432d17e 100644
--- a/app/assets/javascripts/discourse/widgets/post-stream.js.es6
+++ b/app/assets/javascripts/discourse/widgets/post-stream.js.es6
@@ -1,5 +1,6 @@
 import { createWidget } from 'discourse/widgets/widget';
 import transformPost from 'discourse/lib/transform-post';
+import { Placeholder } from 'discourse/lib/posts-with-placeholders';
 
 const DAY = 1000 * 60 * 60 * 24;
 
@@ -21,6 +22,12 @@ export default createWidget('post-stream', {
 
     for (let i=0; i<postArray.length; i++) {
       const post = postArray[i];
+
+      if (post instanceof Placeholder) {
+        result.push(this.attach('post-placeholder'));
+        continue;
+      }
+
       const nextPost = (i < postArray.length - 1) ? postArray[i+i] : null;
 
       const transformed = transformPost(this.currentUser, this.site, post, prevPost, nextPost);