Merge pull request #453 from ember-learn/fix-progress-bar

fix progress-bar transition aborted

Author: mansona

addon/services/progress.js

@@ -3,7 +3,7 @@ import { htmlSafe } from '@ember/template';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 
-import { rawTimeout, task, timeout } from 'ember-concurrency';
+import { rawTimeout, task } from 'ember-concurrency';
 import { buildWaiter } from '@ember/test-waiters';
 
 const SPEED = 200;
@@ -22,10 +22,12 @@ export default class ProgressService extends Service {
     super(...arguments);
 
     this.router.on('routeWillChange', this.onRouteWillChange);
+    this.router.on('routeDidChange', this.onRouteDidChange);
   }
 
   willDestroy() {
     this.router.off('routeWillChange', this.onRouteWillChange);
+    this.router.off('routeDidChange', this.onRouteDidChange);
 
     super.willDestroy(...arguments);
   }
@@ -35,77 +37,56 @@ export default class ProgressService extends Service {
   }
 
   @action
-  async onRouteWillChange(transition) {
-    this.counterTask.perform(transition.promise);
-  }
-
-  increaseCounter() {
-    this.count += 1;
+  async onRouteWillChange() {
     this.updateTask.perform();
   }
 
-  decreaseCounter() {
-    this.count -= 1;
+  @action
+  onRouteDidChange() {
+    this.updateTask.cancelAll();
   }
 
-  @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;
+    try {
+      while (true) {
+        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
+        }%`;
       }
+    } finally {
+      this._style = `transition: width ${SPEED}ms linear; width: 100%`;
+      yield rawTimeout(SPEED);
+      this._style = `transition: opacity ${
+        SPEED * 2
+      }ms linear; width: 100%; opacity: 0`;
 
-      this._style = `transition: width ${SPEED}ms linear; width: ${
-        this.progress * 100
-      }%`;
+      waiter.endAsync(token);
     }
-
-    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;
 }

package-lock.json

@@ -90,7 +90,7 @@
     "ember-source": "~3.28.8",
     "ember-source-channel-url": "^3.0.0",
     "ember-template-lint": "^3.15.0",
-    "ember-try": "https://git@github.com/mansona/ember-try.git#npm-overrides",
+    "ember-try": "https://git@github.com/ember-cli/ember-try.git#master",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-ember": "^10.5.8",
@@ -103,6 +103,7 @@
     "loader.js": "^4.7.0",
     "np": "*",
     "npm-run-all": "^4.1.5",
+    "pnpm": "^7.0.0",
     "prember": "^1.1.0",
     "prettier": "^2.5.1",
     "qunit": "^2.17.2",

package.json

@@ -0,0 +1,21 @@
+import { module, test } from 'qunit';
+import { visit, currentURL, click } from '@ember/test-helpers';
+import { setupApplicationTest } from 'ember-qunit';
+
+module('Acceptance | progress bar', function (hooks) {
+  setupApplicationTest(hooks);
+
+  test('progress bar should not causea a transition abort error', async function (assert) {
+    await visit('/');
+
+    await click('[data-test-basic-route]');
+
+    assert.equal(currentURL(), '/fancy');
+
+    await visit('/');
+
+    await click('[data-test-slow-route]');
+
+    assert.equal(currentURL(), '/fancy');
+  });
+});

tests/acceptance/progress-bar-test.js

@@ -6,4 +6,8 @@ export default class Router extends EmberRouter {
   rootURL = config.rootURL;
 }
 
-Router.map(function () {});
+Router.map(function () {
+  this.route('basicy');
+  this.route('slow');
+  this.route('fancy');
+});