FIX: Force timeline/progress to re-insert into DOM on topic change

FIX: Force timeline/progress to re-insert into DOM on topic change

We have CSS animations which depend on the timeline/progress being completely cleared when navigating from one topic directly to another. This always worked because our loading component would clear the entire page between topics but with our new experimental loading component the DOM was being re-used.

This patch ensures that the timeline is removed completely from the DOM if the topic changes.

diff --git a/app/assets/javascripts/discourse/app/components/topic-navigation.js b/app/assets/javascripts/discourse/app/components/topic-navigation.js
index 93d39a2..77d1dee 100644
--- a/app/assets/javascripts/discourse/app/components/topic-navigation.js
+++ b/app/assets/javascripts/discourse/app/components/topic-navigation.js
@@ -5,7 +5,7 @@ import PanEvents, {
 import Component from "@ember/component";
 import EmberObject from "@ember/object";
 import discourseDebounce from "discourse-common/lib/debounce";
-import { later } from "@ember/runloop";
+import { later, next } from "@ember/runloop";
 import { observes } from "discourse-common/utils/decorators";
 import showModal from "discourse/lib/show-modal";
 
@@ -16,12 +16,23 @@ export default Component.extend(PanEvents, {
   composerOpen: null,
   info: null,
   isPanning: false,
+  canRender: true,
+  _lastTopicId: null,
 
   init() {
     this._super(...arguments);
     this.set("info", EmberObject.create());
   },
 
+  didUpdateAttrs() {
+    this._super(...arguments);
+    if (this._lastTopicId !== this.topic.id) {
+      this._lastTopicId = this.topic.id;
+      this.set("canRender", false);
+      next(() => this.set("canRender", true));
+    }
+  },
+
   _performCheckSize() {
     if (!this.element || this.isDestroying || this.isDestroyed) {
       return;
@@ -180,6 +191,8 @@ export default Component.extend(PanEvents, {
   didInsertElement() {
     this._super(...arguments);
 
+    this._lastTopicId = this.topic.id;
+
     this.appEvents
       .on("topic:current-post-scrolled", this, this._topicScrolled)
       .on("topic:jump-to-post", this, this._collapseFullscreen)
diff --git a/app/assets/javascripts/discourse/app/templates/components/topic-navigation.hbs b/app/assets/javascripts/discourse/app/templates/components/topic-navigation.hbs
index 6491b34..98ec8b7 100644
--- a/app/assets/javascripts/discourse/app/templates/components/topic-navigation.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/topic-navigation.hbs
@@ -1 +1,3 @@
-{{yield info}}
+{{#if canRender}}
+  {{yield info}}
+{{/if}}

GitHub sha: 4f328089d6f9366d8a1b5cad31766ebc0e0926dc

This commit appears in #13782 which was approved by pmusaraj and ZogStriP. It was merged by eviltrout.