Delay loading detect module until page is loaded and idle

plugins/optimization-detective/detect-loader.js

@@ -0,0 +1,35 @@
+/**
+ * Loads the detect module after the page has loaded.
+ *
+ * This prevents a high-priority script module network request from competing with other critical resources. This
+ * JavaScript file must contain a single top-level function which is not exported. The file is inlined as part of
+ * another module which wraps the function in an IIFE.
+ *
+ * @since 1.0.0
+ *
+ * @param {string}                                   detectSrc  - The URL to detect.js.
+ * @param {import("./detect.js").DetectFunctionArgs} detectArgs - The arguments exported from PHP.
+ */
+// eslint-disable-next-line no-unused-vars
+async function load( detectSrc, detectArgs ) {
+	// Wait until the resources on the page have fully loaded.
+	await new Promise( ( resolve ) => {
+		if ( document.readyState === 'complete' ) {
+			resolve();
+		} else {
+			window.addEventListener( 'load', resolve, { once: true } );
+		}
+	} );
+
+	// Wait yet further until idle.
+	if ( typeof requestIdleCallback === 'function' ) {
+		await new Promise( ( resolve ) => {
+			requestIdleCallback( resolve );
+		} );
+	}
+
+	const detect = /** @type {import("./detect.js").DetectFunction} */ (
+		( await import( detectSrc ) ).default
+	);
+	await detect( detectArgs );
+}