From 008f1da53989edbdb69e6e6bed86ae5c53a44edd Mon Sep 17 00:00:00 2001
From: Wadim Kalmykov <36057469+w-4@users.noreply.github.com>
Date: Fri, 16 Oct 2020 01:29:42 +0700
Subject: [PATCH] Make header and navigation components redraw after page
 components (#2390)

Make header and navigation components redraw after page components. Page components manipulate the header (state), but the header redraws before the page on route change. By changing the mount order, we change also the redraw order.
---
 js/src/admin/AdminApplication.js | 13 ++++++-------
 js/src/forum/ForumApplication.js | 12 +++++++-----
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/js/src/admin/AdminApplication.js b/js/src/admin/AdminApplication.js
index 03669d6e0..1e75a3c30 100644
--- a/js/src/admin/AdminApplication.js
+++ b/js/src/admin/AdminApplication.js
@@ -27,20 +27,19 @@ export default class AdminApplication extends Application {
    * @inheritdoc
    */
   mount() {
-    m.mount(document.getElementById('app-navigation'), { view: () => Navigation.component({ className: 'App-backControl', drawer: true }) });
-    m.mount(document.getElementById('header-navigation'), Navigation);
-    m.mount(document.getElementById('header-primary'), HeaderPrimary);
-    m.mount(document.getElementById('header-secondary'), HeaderSecondary);
-    m.mount(document.getElementById('admin-navigation'), AdminNav);
-
     // Mithril does not render the home route on https://example.com/admin, so
     // we need to go to https://example.com/admin#/ explicitly.
     if (!document.location.hash) document.location.hash = '#/';
 
     m.route.prefix = '#';
-
     super.mount();
 
+    m.mount(document.getElementById('app-navigation'), { view: () => Navigation.component({ className: 'App-backControl', drawer: true }) });
+    m.mount(document.getElementById('header-navigation'), Navigation);
+    m.mount(document.getElementById('header-primary'), HeaderPrimary);
+    m.mount(document.getElementById('header-secondary'), HeaderSecondary);
+    m.mount(document.getElementById('admin-navigation'), AdminNav);
+
     // If an extension has just been enabled, then we will run its settings
     // callback.
     const enabled = localStorage.getItem('enabledExtension');
diff --git a/js/src/forum/ForumApplication.js b/js/src/forum/ForumApplication.js
index fdac5ffa8..78f300a60 100644
--- a/js/src/forum/ForumApplication.js
+++ b/js/src/forum/ForumApplication.js
@@ -115,17 +115,19 @@ export default class ForumApplication extends Application {
     this.routes[defaultAction].path = '/';
     this.history.push(defaultAction, this.translator.trans('core.forum.header.back_to_index_tooltip'), '/');
 
+    this.pane = new Pane(document.getElementById('app'));
+
+    m.route.prefix = '';
+    super.mount(this.forum.attribute('basePath'));
+
+    // We mount navigation and header components after the page, so components
+    // like the back button can access the updated state when rendering.
     m.mount(document.getElementById('app-navigation'), { view: () => Navigation.component({ className: 'App-backControl', drawer: true }) });
     m.mount(document.getElementById('header-navigation'), Navigation);
     m.mount(document.getElementById('header-primary'), HeaderPrimary);
     m.mount(document.getElementById('header-secondary'), HeaderSecondary);
     m.mount(document.getElementById('composer'), { view: () => Composer.component({ state: this.composer }) });
 
-    this.pane = new Pane(document.getElementById('app'));
-
-    m.route.prefix = '';
-    super.mount(this.forum.attribute('basePath'));
-
     alertEmailConfirmation(this);
 
     // Route the home link back home when clicked. We do not want it to register