Merge pull request #383 from afzal273/issue-374-progress-bar

Adding progress bar component

Author: mansona

.github/workflows/ci.yml

@@ -22,6 +22,8 @@ jobs:
       - name: Check out a copy of the repo
         uses: actions/checkout@v2
 
+      - uses: mansona/npm-lockfile-version@v1
+
       - name: Use Node.js ${{ env.NODE_VERSION }}
         uses: actions/setup-node@v2-beta
         with:

.gitignore

@@ -26,4 +26,5 @@
 /package.json.ember-try
 
 .vscode
+.idea
 .changelog

addon/components/es-progress-bar.js

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

addon/services/progress.js

@@ -0,0 +1,111 @@
+import Service, { inject as service } from '@ember/service';
+import { htmlSafe } from '@ember/string';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+import { rawTimeout, task, timeout } 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 = '';
+
+  constructor() {
+    super(...arguments);
+
+    this.router.on('routeWillChange', this.onRouteWillChange);
+  }
+
+  willDestroy() {
+    this.router.off('routeWillChange', this.onRouteWillChange);
+
+    super.willDestroy(...arguments);
+  }
+
+  get style() {
+    return htmlSafe(this._style);
+  }
+
+  @action
+  async onRouteWillChange(transition) {
+    this.counterTask.perform(transition.promise);
+  }
+
+  increaseCounter() {
+    this.count += 1;
+    this.updateTask.perform();
+  }
+
+  decreaseCounter() {
+    this.count -= 1;
+  }
+
+  @task(function* (promise) {
+    // if the promise resolves on the next tick, we don't show the loading bar
+    let resolved = false;
+    promise.then(() => {
+      resolved = true;
+    });
+    yield timeout(0);
+
+    if (!resolved) {
+      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;
+}

addon/styles/addon.css

@@ -25,3 +25,4 @@
 @import 'components/es-header.css';
 @import 'components/es-note.css';
 @import 'components/es-sidebar.css';
+@import 'components/es-progress-bar.css';

addon/styles/components/es-progress-bar.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(--color-brand) !important;
+}

addon/templates/components/es-progress-bar.hbs

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

app/components/es-progress-bar.js

@@ -0,0 +1 @@
+export { default } from 'ember-styleguide/components/es-progress-bar';

app/services/progress.js

@@ -0,0 +1 @@
+export { default } from 'ember-styleguide/services/progress';

app/templates/components/es-progress-bar.js

@@ -0,0 +1 @@
+export { default } from 'ember-styleguide/templates/components/es-progress-bar';