ember-concurrency

src/controllers/application.ts

@@ -3,13 +3,26 @@ import { service } from '@ember/service';
 import type SessionService from 'ember-simple-auth/addon/services/session';
 import type EmberNotify from 'ember-notify';
 import { tracked } from '@glimmer/tracking';
+import { restartableTask, timeout } from 'ember-concurrency';
+import type { Task } from 'ember-concurrency';
+
+type MyTaskType = Task<void, []>;
+
 export class ApplicationController extends Controller {
   @service session: SessionService;
   @service notify: EmberNotify;
   @tracked showModal = true;
 
-  closeModal = () => {
+  closeModalTask: MyTaskType = restartableTask(async () => {
+    await this.notify.info(
+      `You trying to close modal, let's debounce it for 300ms`
+    );
+    await timeout(300);
     this.showModal = false;
+  });
+
+  closeModal = () => {
+    this.closeModalTask.perform();
   };
 
   constructor(...args: ConstructorParameters<typeof Controller>) {

vite.config.ts

@@ -11,6 +11,7 @@ import refBucketTransform from 'ember-ref-bucket/lib/ref-transform.js';
 import { babelHotReloadPlugin } from './plugins/hot-reload';
 import { removeLegacyLayout } from './plugins/remove-legacy-layout';
 import { dropImportSync } from './plugins/drop-import-sync';
+import emberConcurrencyTransform from 'ember-concurrency/lib/babel-plugin-transform-ember-concurrency-async-tasks';
 export default defineConfig(({ mode }) => {
   const isProd = mode === 'production';
   const isDev = mode === 'development';
@@ -424,6 +425,7 @@ function defaultBabelPlugins(isProd: boolean) {
       },
     ],
     templateCompilationPlugin(isProd),
+    emberConcurrencyTransform,
   ];
 }