diff --git a/app/protected/route.js b/app/protected/route.js index d38ef3c75..b34cff202 100644 --- a/app/protected/route.js +++ b/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; + } + } } diff --git a/app/protected/template.hbs b/app/protected/template.hbs index 59a185832..39f79caf4 100644 --- a/app/protected/template.hbs +++ b/app/protected/template.hbs @@ -6,3 +6,10 @@ {{outlet}} + + diff --git a/app/styles/loader.scss b/app/styles/loader.scss index a987c45ee..ac5a42d74 100644 --- a/app/styles/loader.scss +++ b/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%; + } }