diff --git a/app/assets/javascripts/discourse/templates/topic-progress.hbs b/app/assets/javascripts/discourse/templates/topic-progress.hbs
index 56cde68e44..b76421f081 100644
--- a/app/assets/javascripts/discourse/templates/topic-progress.hbs
+++ b/app/assets/javascripts/discourse/templates/topic-progress.hbs
@@ -16,10 +16,10 @@
                label="topic.progress.go_bottom"}}
   </nav>
 {{/if}}
-<nav id='topic-progress' title="{{i18n 'topic.progress.title'}}" {{bind-attr class="hideProgress:hidden"}}>
+<nav id='topic-progress' title="{{i18n 'topic.progress.title'}}" class="{{if hideProgress 'hidden'}}">
   <div class='nums'>
-    <h4>{{progressPosition}}</h4><span {{bind-attr class="hugeNumberOfPosts:hidden"}}> <span>/</span> <h4>{{model.postStream.filteredPostsCount}}</h4></span>
+    <h4>{{progressPosition}}</h4><span class="{{if hugeNumberOfPosts 'hidden'}}"> <span>/</span> <h4>{{model.postStream.filteredPostsCount}}</h4></span>
   </div>
-  <i {{bind-attr class=":fa expanded::fa-sort"}}></i>
+  <i class="fa {{if expanded 'fa-sort'}}"></i>
   <div class='bg'>&nbsp;</div>
 </nav>
diff --git a/app/assets/javascripts/discourse/views/topic-progress.js.es6 b/app/assets/javascripts/discourse/views/topic-progress.js.es6
index baff56dcfd..b539b618b4 100644
--- a/app/assets/javascripts/discourse/views/topic-progress.js.es6
+++ b/app/assets/javascripts/discourse/views/topic-progress.js.es6
@@ -4,11 +4,6 @@ export default Ember.View.extend({
   classNameBindings: ['docked'],
 
   _inserted: function() {
-    // This get seems counter intuitive, but it's to trigger the observer on
-    // the streamPercentage for this view. Otherwise the process bar does not
-    // update.
-    this.get('controller.streamPercentage');
-
     this.appEvents.on("composer:opened", this, '_dock')
                   .on("composer:resized", this, '_dock')
                   .on("composer:closed", this, '_dock')
@@ -17,7 +12,6 @@ export default Ember.View.extend({
     // Reflows are expensive. Cache the jQuery selector
     // and the width when inserted into the DOM
     this._$topicProgress = this.$('#topic-progress');
-    this._progressWidth = this._$topicProgress[0].offsetWidth;
   }.on('didInsertElement'),
 
   _unbindEvents: function() {
@@ -29,28 +23,31 @@ export default Ember.View.extend({
 
   _updateBar: function() {
     Em.run.scheduleOnce('afterRender', this, '_updateProgressBar');
-  }.observes('controller.streamPercentage', 'controller.model.postStream.stream.@each'),
+  }.observes('controller.streamPercentage', 'controller.model.postStream.stream.@each').on('init'),
 
   _updateProgressBar: function() {
     // speeds up stuff, bypass jquery slowness and extra checks
-    var totalWidth = this._progressWidth,
-        progressWidth = this.get('controller.streamPercentage') * totalWidth;
+    if (!this._totalWidth) {
+      this._totalWidth = this._$topicProgress[0].offsetWidth;
+    }
+    const totalWidth = this._totalWidth;
+    const progressWidth = this.get('controller.streamPercentage') * totalWidth;
 
     this._$topicProgress.find('.bg')
       .css("border-right-width", (progressWidth === totalWidth) ? "0px" : "1px")
       .width(progressWidth);
   },
 
-  _dock: function () {
-    var maximumOffset = $('#topic-footer-buttons').offset(),
+  _dock() {
+    const maximumOffset = $('#topic-footer-buttons').offset(),
         composerHeight = $('#reply-control').height() || 0,
         $topicProgressWrapper = this.$(),
         style = $topicProgressWrapper.attr('style') || '',
-        isDocked = false,
         offset = window.pageYOffset || $('html').scrollTop();
 
+    let isDocked = false;
     if (maximumOffset) {
-      var threshold = maximumOffset.top,
+      const threshold = maximumOffset.top,
           windowHeight = $(window).height(),
           topicProgressHeight = $('#topic-progress').height();
 
@@ -63,7 +60,7 @@ export default Ember.View.extend({
           $topicProgressWrapper.css('bottom', '');
         }
       } else {
-        var height = composerHeight + "px";
+        const height = composerHeight + "px";
         if ($topicProgressWrapper.css('bottom') !== height) {
           $topicProgressWrapper.css('bottom', height);
         }
@@ -84,21 +81,21 @@ export default Ember.View.extend({
     }
 
     if (this.get('controller.expanded')) {
-      var self = this;
+      const self = this;
       Em.run.schedule('afterRender', function() {
         self.$('input').focus();
       });
     }
   }.observes('controller.expanded'),
 
-  click: function(e) {
+  click(e) {
     if ($(e.target).parents('#topic-progress').length) {
       this.get('controller').send('toggleExpansion');
     }
   },
 
-  keyDown: function(e) {
-    var controller = this.get('controller');
+  keyDown(e) {
+    const controller = this.get('controller');
     if (controller.get('expanded')) {
       if (e.keyCode === 13) {
         controller.send('jumpPost');