Stop loading text in background (#4283)

* stop message

* translation added

* fix2

index.html

@@ -175,21 +175,26 @@
             </script>
             <div class="loading-text" id="loadingText" style="margin-top:1.5rem;"></div>
             <script>
-                document.addEventListener("DOMContentLoaded", function() {
-                    setTimeout(function() {
-                      const loadingText = document.getElementById("loadingText");
-                      const texts = ["Do, Re, Mi, Fa, Sol, La, Ti, Do", "Loading Music Blocks...", "Reading Music..."];
-
-                      let index = 0;
-                      setInterval(function() {
-                        loadingText.textContent = texts[index];
-                        index = (index + 1) % texts.length;
-                      }, 2000); // Change 2000 to adjust cycle duration (in milliseconds)
-
-                      // Show the loading text after 6 seconds
-                      loadingText.style.opacity = 1;
-                    }, 4000); // Change 6000 to adjust the delay (in milliseconds)
-                  });
+                document.addEventListener("DOMContentLoaded", function () {
+                    setTimeout(function () {
+                        const loadingText = document.getElementById("loadingText");
+                        const texts = [_("Do, Re, Mi, Fa, Sol, La, Ti, Do"), _("Loading Music Blocks..."), _("Reading Music...")];
+                        let index = 0;
+
+                        const intervalId = setInterval(function () {
+                            loadingText.textContent = texts[index];
+                            index = (index + 1) % texts.length;
+                        }, 1500);
+
+                        // Stop changing text and finalize loading after 6 seconds
+                        setTimeout(function () {
+                            clearInterval(intervalId);
+                            loadingText.textContent = _("Loading Complete!");
+                            loadingText.style.opacity = 1;
+                        }, 6000);
+                    }, 4000);
+                });
+
               </script>
         </div>