refactor: headstart initialization

Author: andreishket

server/services/snapshot/headstart_snapshot.php

@@ -27,22 +27,40 @@
                 data_config.options = options_<?php echo htmlspecialchars($_GET['service']); ?>.dropdowns;
             }
         </script>
+
         <?php include "../../../dist/headstart.php"; ?>
+
+        <!-- The script below attempts to launch headstart by calling its start method.
+        However, because headstart loads asynchronously, it is necessary to wait some time. -->
         <script type="text/javascript">
-            // Function to check if headstart is loaded and start it
+            const DELAY_BETWEEN_ATTEMPTS_MS = 250;
+            const LIMIT_OF_ATTEMPTS = 10;
+            let numberOfAttempts = 0;
+
+            function checkThatInitializeMethodReady() {
+                return typeof headstart === "object" && typeof headstart.start === "function";
+            }
+
             function initializeHeadstart() {
-                if (typeof headstart !== 'undefined' && headstart.start) {
+                if (checkThatInitializeMethodReady()) {
                     headstart.start();
-                } else {
-                    setTimeout(initializeHeadstart, 100);
+                    return;
                 }
+
+                if (numberOfAttempts < LIMIT_OF_ATTEMPTS) {
+                    let timerId = setTimeout(() => {
+                        clearTimeout(timerId);
+                        numberOfAttempts += 1;
+                        initializeHeadstart();
+                    }, DELAY_BETWEEN_ATTEMPTS_MS);
+
+                    return;
+                }
+
+                console.error("Unable to load headstart or its start method is not a function!");
             }
-            
-            // Wait for DOM to be ready, then start checking for headstart
-            document.addEventListener('DOMContentLoaded', function() {
-                // Give a small delay to ensure deferred scripts have time to load
-                setTimeout(initializeHeadstart, 500);
-            });
+
+            document.addEventListener("DOMContentLoaded", initializeHeadstart);
         </script>
     </body>
 </html>