Use global loader in LegacyBasetemplate (and use correct event)

aleksis/core/assets/components/LegacyBaseTemplate.vue

 <template>
   <div class="position: relative;">
-    <loading v-if="loading" />
     <iframe
       :src="'/django' + $route.path + queryString"
       style="border: 0; margin: -12px"
@@ -13,18 +12,12 @@
 </template>
 
 <script>
-import Loading from "./Loading.vue";
-
 export default {
   data: function () {
     return {
       iFrameHeight: 0,
-      loading: true,
     };
   },
-  components: {
-    Loading,
-  },
   computed: {
     queryString() {
       let qs = [];
@@ -39,7 +32,7 @@ export default {
       if (!event.data.height) {
         return;
       }
-      this.loading = false;
+      this.$root.contentLoading = false;
       this.iFrameHeight = event.data.height;
     },
     load() {
@@ -57,9 +50,8 @@ export default {
       }
 
       // Show loader if iframe starts to change it's content, even if the $route stays the same
-      this.$refs.contentIFrame.contentWindow.onbeforeunload = (e) => {
-        this.loading = true;
-        e.resume();
+      this.$refs.contentIFrame.contentWindow.onpagehide = (e) => {
+        this.$root.contentLoading = true;
       }
       const title = this.$refs.contentIFrame.contentWindow.document.title;
       document.title = title;
@@ -67,7 +59,7 @@ export default {
   },
   watch: {
     $route() {
-      this.loading = true;
+      this.$root.contentLoading = true;
     },
   },
   mounted() {
@@ -75,6 +67,7 @@ export default {
   },
   beforeDestroy() {
     window.removeEventListener("message", this.receiveMessage);
+    this.$root.contentLoading = false;
   },
   name: "LegacyBaseTemplate",
 };