refactor(js): add 'debounced-empty' when there are no more debouncing call

app/javascript/controllers/application_controller.ts

@@ -7,9 +7,20 @@ export class ApplicationController extends Controller {
   #debounced = new Map<() => void, () => void>();
 
   protected debounce(fn: () => void, interval: number): void {
+    this.globalDispatch('debounced:added');
+
     let debounced = this.#debounced.get(fn);
     if (!debounced) {
-      debounced = debounce(fn.bind(this), interval);
+      let wrapper = () => {
+        fn.bind(this)();
+        this.#debounced.delete(fn);
+        if (this.#debounced.size == 0) {
+          this.globalDispatch('debounced:empty');
+        }
+      }
+
+      debounced = debounce(wrapper.bind(this), interval);
+
       this.#debounced.set(fn, debounced);
     }
     debounced();

app/javascript/controllers/autosave_status_controller.ts

@@ -32,6 +32,21 @@ export class AutosaveStatusController extends ApplicationController {
     this.onGlobal<CustomEvent>('autosave:error', (event) =>
       this.didFail(event)
     );
+
+    this.onGlobal('debounced:added', () => this.debouncedAdded());
+    this.onGlobal('debounced:empty', () => this.debouncedEmpty());
+  }
+
+  private debouncedAdded() {
+    const autosave = this.element as HTMLDivElement;
+    removeClass(autosave, 'debounced-empty');
+    addClass(autosave, 'debounced-added');
+  }
+
+  private debouncedEmpty() {
+    const autosave = this.element as HTMLDivElement;
+    addClass(autosave, 'debounced-empty');
+    removeClass(autosave, 'debounced-added');
   }
 
   onClickRetryButton() {