Refactor loading indicators to use CSS dots

This change replaces inline spinners with a more subtle CSS-based loading indicator. It also cleans up the inline loading text to be more concise.

Co-authored-by: mathieumoran1 <[email protected]>

public/css/app.css

@@ -20,4 +20,33 @@ footer {
 
   #copy {
     text-decoration: none;
+  }
+
+  /* Simple, clean loading indicator (no spinner spam) */
+  .loading-indicator {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 2rem 0;
+  }
+
+  .loading-dots {
+    display: inline-flex;
+    gap: 0.15rem;
+  }
+
+  .loading-dots span {
+    display: inline-block;
+    opacity: 0.2;
+    transform: translateY(-1px);
+    animation: loading-dot 1.1s infinite ease-in-out;
+  }
+
+  .loading-dots span:nth-child(2) { animation-delay: 0.15s; }
+  .loading-dots span:nth-child(3) { animation-delay: 0.30s; }
+
+  @keyframes loading-dot {
+    0%, 80%, 100% { opacity: 0.2; }
+    40% { opacity: 1; }
   }