Make the "Importing" button text more dynamic

Now the text of the button cycles through little loading dots to
indicate that there is some thinking happening.

This was part of my original vision for this button, so finally we have
the import loading experience our users deserve.

CHANGELOG.md

@@ -14,9 +14,11 @@ The format is based on Keep a Changelog, and this project adheres to Semantic Ve
 ### Changed
 
 - Decompose instructions boxes that start with "Instructions for new nofo team"
+- Made the import button more dynamic
 
 ### Fixed
 
+- Loading gif also used on re-import page
 - bug: since adding replace_links, replace_chars was not being applied
 
 ## [1.39.0] - 2023-12-04

bloom_nofos/bloom_nofos/static/styles.css

@@ -293,6 +293,14 @@ details > summary > span:hover {
   padding: 8px 0;
 }
 
+.nofo_import .submit-button {
+  width: 132px;
+}
+
+.nofo_import .submit-button.submit-button--loading {
+  text-align: left;
+}
+
 /* Edit page */
 
 /* header widget for NOFO */

bloom_nofos/bloom_nofos/templates/includes/loading_horse.html

@@ -12,10 +12,21 @@
     const loadingGif = form.querySelector(".loading-horse--container");
 
     form.addEventListener("submit", function () {
-      // Disable the button and change its text
+      // Disable the button, change its text, add classname
       button.disabled = true;
-      button.textContent = "Importing…";
+      button.textContent = "Importing";
+      button.classList.add("submit-button--loading");
+      button.setAttribute("aria-label", "Importing…");
 
+      let dotCount = 0; // Tracks the number of dots (0 to 3)
+
+      // Start an interval to cycle through the dots
+      intervalId = setInterval(() => {
+        dotCount = (dotCount + 1) % 4; // Cycle between 0, 1, 2, 3
+        button.textContent = `Importing${".".repeat(dotCount)}`;
+      }, 330);
+
+      // show the horse gif
       setTimeout(() => {
         loadingGif.classList.add("visible");
       }, 50);