Use ember-cli-page-progress to display loading progress bar at the top of the page

Author: Turbo87

app/routes/application.js

@@ -4,6 +4,7 @@ import { inject as service } from '@ember/service';
 export default Route.extend({
   flashMessages: service(),
   googleCharts: service(),
+  pageProgress: service(),
   session: service(),
 
   beforeModel() {
@@ -15,6 +16,13 @@ export default Route.extend({
   },
 
   actions: {
+    loading(transition) {
+      let { pageProgress } = this;
+      pageProgress.start(transition.targetName);
+      transition.promise.finally(() => pageProgress.done());
+      return true;
+    },
+
     didTransition() {
       this.flashMessages.step();
     },

app/styles/application.module.css

@@ -7,6 +7,7 @@
     --link-color: rgb(0, 172, 91);
     --link-hover-color: #007940;
     --separator-color: #284725;
+    --yellow: #ffc833;
 }
 
 * {
@@ -31,6 +32,20 @@ body {
     align-items: center;
 }
 
+:global(.page-progress) {
+    position: fixed;
+    pointer-events: none;
+
+    :global(.bar) {
+        position: fixed;
+        left: 0;
+        width: 0;
+        height: 3px;
+        box-shadow: 0 0 10px rgba(0, 13, 41, 0.8);
+        background: var(--yellow) !important;
+    }
+}
+
 h1 {
     @media only screen and (max-width: 400px) {
         font-size: 1.5em;

app/templates/application.hbs

@@ -2,6 +2,7 @@
 
 {{title "crates.io: Rust Package Registry" separator=' - ' prepend=true}}
 
+<PageProgress/>
 <Header/>
 
 <main local-class="main">

ember-cli-build.js

@@ -34,6 +34,9 @@ module.exports = function (defaults) {
         before: [require('postcss-nested')],
       },
     },
+    'ember-cli-page-progress': {
+      includeCss: false,
+    },
     fingerprint: {
       extensions: ['js', 'css', 'png', 'jpg', 'gif', 'map', 'svg', 'ttf', 'woff', 'woff2'],
     },

package-lock.json

@@ -64,6 +64,7 @@
     "ember-cli-meta-tags": "^6.0.0",
     "ember-cli-mirage": "^1.1.6",
     "ember-cli-moment-shim": "^3.7.1",
+    "ember-cli-page-progress": "^2.0.0",
     "ember-cli-sri": "2.1.1",
     "ember-cli-uglify": "^3.0.0",
     "ember-click-outside": "^1.3.0",