Added loading spinner for the checkout page for some GUI feedback on amount change for the users.

app/templates/checkout.html

@@ -65,6 +65,9 @@
     </div>
   </div>
   {% endif %}
+  <div id="loader">
+    <div class="spinner"></div>
+  </div>
 </main>
 {% with hide_menu=True, custom_border=not data.checkout_items %}
 {% include "partials/footer.html" %}

static/css/styles.css

@@ -1547,3 +1547,32 @@ create an even border-bottom line */
     width: 12px;
     height: 12px;
 }
+
+/* Spinner for the cart */
+
+#loader {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(255, 255, 255, 0.9);
+    display: none; /* hidden by default */
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+}
+
+.spinner {
+    border: 8px solid #f3f3f3;
+    border-top: 8px solid #3498db;
+    border-radius: 50%;
+    width: 60px;
+    height: 60px;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}

static/js/checkout.js

@@ -9,10 +9,10 @@ async function processForm(form) {
 
   form.addEventListener('submit', async(e) => {
     e.preventDefault();
-
     // -- update form data
+    document.getElementById('loader').style.display = 'flex';
     const data = await updateCart(form);
-
+    document.getElementById('loader').style.display = 'none';
     // -- update cart icon
     updateCartIcon(data);