UX: Be more optimistic about showing topic titles while entering topics

app/assets/javascripts/discourse/components/discourse-topic.js.es6

@@ -1,3 +1,4 @@
+import DiscourseURL from 'discourse/lib/url';
 import AddArchetypeClass from 'discourse/mixins/add-archetype-class';
 import ClickTrack from 'discourse/lib/click-track';
 import Scrolling from 'discourse/mixins/scrolling';
@@ -143,7 +144,9 @@ export default Ember.Component.extend(AddArchetypeClass, Scrolling, {
       if (showTopic) {
         this.appEvents.trigger('header:show-topic', topic);
       } else {
-        this.appEvents.trigger('header:hide-topic');
+        if (!DiscourseURL.isJumpScheduled()) {
+          this.appEvents.trigger('header:hide-topic');
+        }
       }
     }
 

app/assets/javascripts/discourse/components/topic-list-item.js.es6

@@ -109,11 +109,11 @@ export default Ember.Component.extend(bufferedRender({
     const result = showEntrance.call(this, e);
     if (result === false) { return result; }
 
+    const topic = this.get('topic');
     const target = $(e.target);
     if (target.hasClass('bulk-select')) {
       const selected = this.get('selected');
 
-      const topic = this.get('topic');
       if (target.is(':checked')) {
         selected.addObject(topic);
       } else {
@@ -122,7 +122,7 @@ export default Ember.Component.extend(bufferedRender({
     }
 
     if (target.hasClass('raw-topic-link')) {
-      this.appEvents.trigger('header:hide-topic');
+      this.appEvents.trigger('header:update-topic', topic);
       DiscourseURL.routeTo(target.attr('href'));
       return false;
     }

app/assets/javascripts/discourse/lib/url.js.es6

@@ -34,10 +34,12 @@ export function jumpToElement(elementId) {
   });
 }
 
+let _transitioning = false;
+
 const DiscourseURL = Ember.Object.extend({
 
   isJumpScheduled() {
-    return _jumpScheduled;
+    return _transitioning || _jumpScheduled;
   },
 
   // Jumps to a particular post in the stream
@@ -45,12 +47,14 @@ const DiscourseURL = Ember.Object.extend({
     opts = opts || {};
     const holderId = `#post_${postNumber}`;
 
+    _transitioning = true;
     Em.run.schedule('afterRender', () => {
       let elementId;
       let holder;
 
       if (postNumber === 1 && !opts.anchor) {
         $(window).scrollTop(0);
+        _transitioning = false;
         return;
       }
 
@@ -64,7 +68,11 @@ const DiscourseURL = Ember.Object.extend({
         holder = $(elementId);
       }
 
-      const lockon = new LockOn(elementId);
+      const lockon = new LockOn(elementId, {
+        finished() {
+          _transitioning = false;
+        }
+      });
 
       if (holder.length > 0 && opts && opts.skipIfOnScreen){
         const elementTop = lockon.elementTop();
@@ -73,6 +81,7 @@ const DiscourseURL = Ember.Object.extend({
         const height = holder.height();
 
         if (elementTop > scrollTop && (elementTop + height) < (scrollTop + windowHeight)) {
+          _transitioning = false;
           return;
         }
       }

app/assets/javascripts/discourse/widgets/header-topic-info.js.es6

@@ -23,20 +23,22 @@ export default createWidget('header-topic-info', {
       }
     }
     const loaded = topic.get('details.loaded');
+    const fancyTitle = topic.get('fancyTitle');
+    const href = topic.get('url');
 
-    if (loaded) {
+    if (fancyTitle && href) {
       heading.push(this.attach('topic-status', attrs));
 
-      const titleHTML = new RawHtml({ html: `<span>${topic.get('fancyTitle')}</span>` });
+      const titleHTML = new RawHtml({ html: `<span>${fancyTitle}</span>` });
       heading.push(this.attach('link', { className: 'topic-link',
                                          action: 'jumpToTopPost',
-                                         href: topic.get('url'),
+                                         href,
                                          contents: () => titleHTML }));
     }
 
     const title = [h('h1', heading)];
-    if (loaded) {
+    const category = topic.get('category');
-      const category = topic.get('category');
+    if (loaded || category) {
       if (category && (!category.get('isUncategorizedCategory') || !this.siteSettings.suppress_uncategorized_badge)) {
         const parentCategory = category.get('parentCategory');
         if (parentCategory) {