refactor(frontend): use ember-lifeline instead of @ember/runloop (#613)

* chore(frontend/eslint): make ember/no-runloop error instead of warn

* chore(frontend/deps): add ember-lifeline

* refactor(frontend): use ember-lifeline instead of @ember/runloop

frontend/app/analysis/edit/controller.js

@@ -1,11 +1,11 @@
 import { getOwner } from "@ember/application";
 import Controller from "@ember/controller";
 import { action } from "@ember/object";
-import { later } from "@ember/runloop";
 import { service } from "@ember/service";
 import { dasherize } from "@ember/string";
 import { tracked } from "@glimmer/tracking";
 import { task } from "ember-concurrency";
+import { runTask } from "ember-lifeline";
 
 import {
   underscoreQueryParams,
@@ -241,7 +241,7 @@ export default class AnalysisEditController extends Controller {
     // We have to defer the rollback for some milliseconds since the combobox
     // reset action triggers mutation of customer, task, and project which
     // would be run after this rollback and therefore trigger changes
-    later(() => {
+    runTask(this, () => {
       changeset.rollback();
     });
   }

frontend/app/analysis/index/route.js

@@ -1,5 +1,5 @@
 import Route from "@ember/routing/route";
-import { next } from "@ember/runloop";
+import { runTask } from "ember-lifeline";
 
 export default class AnalysisIndexRoute extends Route {
   queryParams = {
@@ -15,11 +15,15 @@ export default class AnalysisIndexRoute extends Route {
     /* eslint-disable-next-line ember/no-controller-access-in-routes */
     const controller = this.controllerFor("analysis.index");
     const skipReset = controller.skipResetOnSetup;
-    next(() => {
-      if (!skipReset) {
-        controller._reset();
-      }
-    });
+    runTask(
+      this,
+      () => {
+        if (!skipReset) {
+          controller._reset();
+        }
+      },
+      1,
+    );
   }
 
   setupController(controller) {

frontend/app/components/datepicker.js

@@ -1,9 +1,9 @@
 import { action } from "@ember/object";
 import { guidFor } from "@ember/object/internals";
-import { scheduleOnce } from "@ember/runloop";
 import { isTesting, macroCondition } from "@embroider/macros";
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
+import { scheduleTask } from "ember-lifeline";
 import moment from "moment";
 
 const DISPLAY_FORMAT = "DD.MM.YYYY";
@@ -50,7 +50,7 @@ export default class Datepicker extends Component {
 
   @action
   checkValidity() {
-    scheduleOnce("afterRender", this, this.deferredWork);
+    scheduleTask(this, "actions", this.deferredWork);
   }
 
   @action

frontend/app/components/optimized-power-select/options.js

@@ -1,8 +1,8 @@
 import { action } from "@ember/object";
-import { scheduleOnce } from "@ember/runloop";
 import { macroCondition, isTesting } from "@embroider/macros";
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
+import { scheduleTask } from "ember-lifeline";
 
 const isTouchDevice = !!window && "ontouchstart" in window;
 
@@ -21,9 +21,9 @@ export default class OptimizedPowerSelectOptionsComponent extends Component {
 
   constructor(...args) {
     super(...args);
-    scheduleOnce(
-      "actions",
+    scheduleTask(
       this.args.select.actions,
+      "actions",
       "scrollTo",
       this.args.select.highlighted,
     );

frontend/app/components/task-selection.js

@@ -1,8 +1,8 @@
 import { action } from "@ember/object";
-import { later } from "@ember/runloop";
 import { service } from "@ember/service";
 import Component from "@glimmer/component";
 import { restartableTask, timeout, dropTask } from "ember-concurrency";
+import { runTask } from "ember-lifeline";
 import { trackedTask } from "reactiveweb/ember-concurrency";
 import { resolve } from "rsvp";
 import { localCopy } from "tracked-toolbox";
@@ -318,7 +318,7 @@ export default class TaskSelectionComponent extends Component {
     }
 
     if (!options.preventAction) {
-      later(this, () => {
+      runTask(this, () => {
         (this.args["on-set-customer"] === undefined
           ? () => {}
           : this.args["on-set-customer"])(value);
@@ -350,7 +350,7 @@ export default class TaskSelectionComponent extends Component {
     }
 
     if (!options.preventAction) {
-      later(this, () => {
+      runTask(this, () => {
         (this.args["on-set-project"] === undefined
           ? () => {}
           : this.args["on-set-project"])(value);
@@ -375,7 +375,7 @@ export default class TaskSelectionComponent extends Component {
     }
 
     if (!options.preventAction) {
-      later(this, async () => {
+      runTask(this, async () => {
         (this.args["on-set-task"] === undefined
           ? () => {}
           : this.args["on-set-task"])(value);

frontend/app/components/timed-clock.js

@@ -1,9 +1,9 @@
 import { setProperties } from "@ember/object";
-import { scheduleOnce } from "@ember/runloop";
 import { isTesting, macroCondition } from "@embroider/macros";
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import { task, timeout } from "ember-concurrency";
+import { scheduleTask } from "ember-lifeline";
 import moment from "moment";
 
 export default class TimedClock extends Component {
@@ -24,7 +24,7 @@ export default class TimedClock extends Component {
   constructor(...args) {
     super(...args);
 
-    scheduleOnce("actions", this.timer, "perform");
+    scheduleTask(this.timer, "actions", "perform");
   }
 
   timer = task(async () => {

frontend/app/controllers/qpcontroller.js

@@ -1,5 +1,5 @@
 import Controller from "@ember/controller";
-import { next } from "@ember/runloop";
+import { runTask } from "ember-lifeline";
 
 export default class ControllersQPControllerController extends Controller {
   #defaults = {};
@@ -8,7 +8,7 @@ export default class ControllersQPControllerController extends Controller {
     super(...args);
 
     // defer until the extending controller has set it's query params
-    next(() => this.storeQPDefaults());
+    runTask(this, () => this.storeQPDefaults(), 1);
   }
 
   storeQPDefaults() {

frontend/app/index/controller.js

@@ -1,11 +1,11 @@
 import Controller from "@ember/controller";
 import { action, get } from "@ember/object";
-import { scheduleOnce } from "@ember/runloop";
 import { service } from "@ember/service";
 import { camelize } from "@ember/string";
 import { isTesting, macroCondition } from "@embroider/macros";
 import { tracked } from "@glimmer/tracking";
 import { dropTask, timeout } from "ember-concurrency";
+import { scheduleTask } from "ember-lifeline";
 import moment from "moment";
 import { trackedFunction } from "reactiveweb/function";
 import { tracked as trackedWrapper } from "tracked-built-ins";
@@ -48,7 +48,7 @@ export default class IndexController extends Controller {
   constructor(...args) {
     super(...args);
     // this kicks off the activity sum loop
-    scheduleOnce("afterRender", this, this._activitySumTask.perform);
+    scheduleTask(this._activitySumTask, "actions", "perform");
   }
 
   get _allActivities() {
@@ -123,7 +123,7 @@ export default class IndexController extends Controller {
 
     // Save latest activitySum for display while reports are generated.
     // See activitySum getter.
-    scheduleOnce("afterRender", this, "_storeLastActivitySum");
+    scheduleTask(this, "actions", "_storeLastActivitySum");
 
     return duration;
   }

frontend/app/index/reports/controller.js

@@ -5,9 +5,9 @@
  */
 import Controller from "@ember/controller";
 import { action } from "@ember/object";
-import { scheduleOnce } from "@ember/runloop";
 import { service } from "@ember/service";
 import { tracked } from "@glimmer/tracking";
+import { scheduleTask } from "ember-lifeline";
 import moment from "moment";
 import { all } from "rsvp";
 import { cached } from "tracked-toolbox";
@@ -76,7 +76,7 @@ export default class IndexReportController extends Controller {
     });
 
     if (!reportsToday.find((r) => r.isNew)) {
-      scheduleOnce("actions", this, "createEmptyReport");
+      scheduleTask(this, "actions", "createEmptyReport");
     }
 
     return reportsToday.toSorted((r) => r.isNew);

frontend/app/services/tour.js

@@ -1,8 +1,8 @@
-import { schedule, later } from "@ember/runloop";
 import { service } from "@ember/service";
 import { waitFor } from "@ember/test-waiters";
 import { isTesting, macroCondition } from "@embroider/macros";
 import { tracked } from "@glimmer/tracking";
+import { scheduleTask, runTask } from "ember-lifeline";
 import Tour from "ember-shepherd/services/tour";
 import { cached } from "tracked-toolbox";
 
@@ -33,8 +33,8 @@ export default class TourService extends Tour {
     };
     this.defaultStepOptions = {
       beforeShowPromise() {
-        return new Promise(function (resolve) {
-          schedule("afterRender", this, function () {
+        return new Promise((resolve) => {
+          scheduleTask(this, "actions", () => {
             window.scrollTo(0, 0);
             resolve();
           });
@@ -137,7 +137,7 @@ export default class TourService extends Tour {
   async startTour() {
     if (this._wantsTour && this.hasTourForRoute) {
       await this.prepareTourForCurrentRoute();
-      schedule("afterRender", this, () => {
+      scheduleTask(this, "render", () => {
         this._onTourFinish = async () => {
           const done = this.autostartTour.done;
           done.push(this.routeName);
@@ -166,9 +166,13 @@ export default class TourService extends Tour {
           }
         };
 
-        later(this, () => {
-          this.start();
-        });
+        runTask(
+          this,
+          () => {
+            this.start();
+          },
+          1,
+        );
       });
     }
   }

frontend/app/services/tracking.js

@@ -1,10 +1,10 @@
 import { getOwner } from "@ember/application";
-import { scheduleOnce } from "@ember/runloop";
 import Service, { service } from "@ember/service";
 import { camelize, capitalize } from "@ember/string";
 import { isTesting, macroCondition } from "@embroider/macros";
 import { tracked } from "@glimmer/tracking";
 import { dropTask, task, timeout } from "ember-concurrency";
+import { scheduleTask } from "ember-lifeline";
 import moment from "moment";
 import { trackedTask } from "reactiveweb/ember-concurrency";
 
@@ -109,11 +109,7 @@ export default class TrackingService extends Service {
    * @public
    */
   setTitle(title) {
-    scheduleOnce(
-      "afterRender",
-      this,
-      this.scheduleDocumentTitle.bind(this, title),
-    );
+    scheduleTask(this, "actions", this.scheduleDocumentTitle.bind(this, title));
   }
 
   scheduleDocumentTitle(t) {

frontend/eslint.config.mjs

@@ -9,7 +9,6 @@ export default [
       "import/internal-regex": "^timed/",
     },
     rules: {
-      "ember/no-runloop": "warn",
       "ember/no-observers": "warn",
     },
   },

frontend/package.json

@@ -77,6 +77,7 @@
     "ember-focus-trap": "^1.1.1",
     "ember-in-viewport": "4.1.0",
     "ember-keyboard": "^9.0.1",
+    "ember-lifeline": "^7.0.0",
     "ember-load-initializers": "2.1.2",
     "ember-math-helpers": "2.18.2",
     "ember-modifier": "^4.1.0",