Replace "Loading" template with progress bar

Author: Turbo87

app/components/progress-bar.hbs

@@ -0,0 +1 @@
+<div local-class="progress-bar" style={{this.progress.style}}></div>

app/components/progress-bar.js

@@ -0,0 +1,6 @@
+import { inject as service } from '@ember/service';
+import Component from '@glimmer/component';
+
+export default class extends Component {
+  @service progress;
+}

app/components/progress-bar.module.css

@@ -0,0 +1,8 @@
+.progress-bar {
+    position: fixed;
+    left: 0;
+    top: 0;
+    height: 3px;
+    box-shadow: 0 0 10px rgba(0, 13, 41, 0.6);
+    background: var(--yellow) !important;
+}

app/controllers/application.js

@@ -4,4 +4,5 @@ import { inject as service } from '@ember/service';
 export default Controller.extend({
   design: service(),
   flashMessages: service(),
+  progress: service(),
 });

app/routes/application.js

@@ -4,6 +4,7 @@ import { inject as service } from '@ember/service';
 export default Route.extend({
   flashMessages: service(),
   googleCharts: service(),
+  progress: service(),
   session: service(),
 
   beforeModel() {
@@ -15,6 +16,10 @@ export default Route.extend({
   },
 
   actions: {
+    loading(transition) {
+      this.progress.handle(transition);
+      return true;
+    },
     didTransition() {
       this.flashMessages.step();
     },

app/services/progress.js

@@ -0,0 +1,84 @@
+import Service, { inject as service } from '@ember/service';
+import { htmlSafe } from '@ember/string';
+import { tracked } from '@glimmer/tracking';
+
+import { rawTimeout, task } from 'ember-concurrency';
+import { buildWaiter } from 'ember-test-waiters';
+
+const SPEED = 200;
+
+let waiter = buildWaiter('progress-bar');
+
+export default class ProgressService extends Service {
+  @service router;
+
+  count = 0;
+  progress = 0;
+
+  @tracked _style = '';
+
+  get style() {
+    return htmlSafe(this._style);
+  }
+
+  handle(thenable) {
+    this.counterTask.perform(thenable);
+  }
+
+  increaseCounter() {
+    this.count += 1;
+    this.updateTask.perform();
+  }
+
+  decreaseCounter() {
+    this.count -= 1;
+  }
+
+  @task(function* (promise) {
+    try {
+      this.increaseCounter();
+      yield promise;
+    } finally {
+      this.decreaseCounter();
+    }
+  })
+  counterTask;
+
+  @(task(function* () {
+    let token = waiter.beginAsync();
+
+    this.progress = 0;
+    this._style = `width: 0%`;
+
+    while (this.count !== 0) {
+      yield rawTimeout(SPEED);
+
+      let currentAmount;
+      if (this.progress >= 0 && this.progress < 0.2) {
+        currentAmount = 0.1;
+      } else if (this.progress >= 0.2 && this.progress < 0.5) {
+        currentAmount = 0.04;
+      } else if (this.progress >= 0.5 && this.progress < 0.8) {
+        currentAmount = 0.02;
+      } else if (this.progress >= 0.8 && this.progress < 0.99) {
+        currentAmount = 0.005;
+      } else {
+        currentAmount = 0;
+      }
+
+      this.progress += currentAmount;
+      if (this.progress > 0.998) {
+        this.progress = 0.998;
+      }
+
+      this._style = `transition: width ${SPEED}ms linear; width: ${this.progress * 100}%`;
+    }
+
+    this._style = `transition: width ${SPEED}ms linear; width: 100%`;
+    yield rawTimeout(SPEED);
+    this._style = `transition: opacity ${SPEED * 2}ms linear; width: 100%; opacity: 0`;
+
+    waiter.endAsync(token);
+  }).drop())
+  updateTask;
+}

app/styles/application.module.css

@@ -2,6 +2,7 @@
     --violet: #2e2359;
     --dark-grey: #2a3439;
     --dark-green: #3b6837;
+    --yellow: #ffc833;
 
     --header-bg-color: var(--dark-green);
     --footer-bg-color: var(--dark-green);

app/templates/application.hbs

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