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.

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)

app/assets/javascripts/discourse/app/templates/components/topic-navigation.hbs

@@ -1 +1,3 @@
-{{yield info}}
+{{#if canRender}}
+  {{yield info}}
+{{/if}}