feat: implement IdleModule for executing tasks during browser idle time

Author: caperaven

app/material-icons/material-icons.js

@@ -2,6 +2,7 @@ import {ComponentModule} from "../../src/modules/component.js";
 import "./../../components/material-icon/material-icon.js";
 import {icons} from "./icons.js";
 import { EventsManager } from "../../src/system/events-manager.js";
+import {IdleModule} from "./../../src/modules/idle.js";
 
 export default class MaterialIconsView extends HTMLElement {
 	static tag = "material-icons-view";
@@ -18,7 +19,7 @@ export default class MaterialIconsView extends HTMLElement {
 			url: import.meta.url,
 		});
 
-		this.#createIcons();
+		IdleModule.perform({tasks: [this.#createIcons.bind(this)]});
 		this.#setupSearch();
 	}
 

src/modules/idle.js

@@ -0,0 +1,52 @@
+import { validateArgs } from "./../validate/validate-args.js";
+
+export class IdleModule {
+    static name = Object.freeze("idle");
+
+    static perform(args) {
+        validateArgs(args, {
+            tasks: { type: "Array", required: true }
+        }, "IdleModule.initialize: ");
+
+        return globalThis.idleWorker.perform(args.tasks);
+    }
+}
+
+/**
+ * This class is responsible for executing tasks when the browser is idle.
+ * It maintains a queue of tasks to be executed when the browser is idle.
+ */
+class IdleWorker {
+    #queue = [];
+    #idleCallbackId = null;
+
+    /**
+     * Perform the first task in the queue.
+     * @returns
+     */
+    #performFirstTask(deadline) {
+        while ((deadline.timeRemaining() > 0 || deadline.didTimeout) && this.#queue.length > 0) {
+            const task = this.#queue.shift();
+            task();
+        }
+
+        if (this.#queue.length > 0) {
+            this.#idleCallbackId = requestIdleCallback(this.#performFirstTask.bind(this));
+        } else {
+            this.#idleCallbackId = null;
+        }
+    }
+
+    perform(tasks) {
+        this.#queue.push(...tasks);
+        this.#startIdleTaskExecution();
+    }
+
+    #startIdleTaskExecution() {
+        if (this.#idleCallbackId === null) {
+            this.#idleCallbackId = requestIdleCallback(this.#performFirstTask.bind(this));
+        }
+    }
+}
+
+globalThis.idleWorker ||= new IdleWorker();