Adds spinner after submission

1 files changed, 18 insertions, 0 deletions

diff --git a/alphabetlearning/templates/pages/home.html b/alphabetlearning/templates/pages/home.html
index e0827c1..6261524 100644
--- a/alphabetlearning/templates/pages/home.html
+++ b/alphabetlearning/templates/pages/home.html
@@ -91,6 +91,9 @@
                         >
                     </p>
                 </form>
+                <div id="spinner-overlay" class="spinner-overlay">
+                    <div class="spinner"></div>
+                </div>
             </div>
             <div class="col-lg-12">
                 <h2 class="display-4 font-weight-bolder my-3">Bonus offer!</h2>
@@ -201,4 +204,19 @@
             launched in Spring 2025.
         </p>
     </div>
+{% block inline_javascript %}
+<script>
+document.addEventListener('DOMContentLoaded', () => {
+    const form = document.querySelector('form'); // Adjust this selector for your form
+    const spinnerOverlay = document.getElementById('spinner-overlay');
+
+    if (form) {
+        form.addEventListener('submit', () => {
+            spinnerOverlay.style.display = 'flex'; // Show the spinner overlay
+        });
+    }
+});
+</script>
+
+{% endblock inline_javascript %}
 {% endblock content %}