fix: protected route events

* handle finished and loading events correctly
* make loader visible via z-index 9999

app/protected/route.js

@@ -88,15 +88,24 @@ export default class ProtectedRoute extends Route {
   loading(transition) {
     //eslint-disable-next-line ember/no-controller-access-in-routes
     const controller = this.controllerFor("protected");
-
     if (controller) {
-      controller.set("loading", true);
+      controller.loading = true;
 
       if (transition) {
         transition.promise.finally(function () {
-          controller.loading = false;
+          controller.send("finished");
         });
       }
     }
   }
+
+  @action
+  finished() {
+    //eslint-disable-next-line ember/no-controller-access-in-routes
+    const controller = this.controllerFor("protected");
+
+    if (controller) {
+      controller.loading = false;
+    }
+  }
 }

app/protected/template.hbs

@@ -6,3 +6,10 @@
     {{outlet}}
   </div>
 </main>
+
+<WelcomeModal
+  @visible={{this.visible}}
+  @on-never={{this.neverTour}}
+  @on-later={{this.laterTour}}
+  @on-start={{this.startTour}}
+/>

app/styles/loader.scss

@@ -5,10 +5,11 @@
   top: 0;
   right: 0;
   left: 0;
+  z-index: 9999;
   overflow: hidden;
   background-color: #ddd;
 }
-.loader:before{
+.loader:before {
   display: block;
   position: absolute;
   content: "";
@@ -20,10 +21,23 @@
 }
 
 @keyframes loading {
-    from { left: -200px; width: 30%; }
-    50%  {               width: 30%; }
-    70%  {               width: 70%; }
-    80%  { left: 50%;                }
-    95%  { left: 120%;               }
-    to   { left: 100%;               }
+  from {
+    left: -200px;
+    width: 30%;
+  }
+  50% {
+    width: 30%;
+  }
+  70% {
+    width: 70%;
+  }
+  80% {
+    left: 50%;
+  }
+  95% {
+    left: 120%;
+  }
+  to {
+    left: 100%;
+  }
 }