Loaders

templates/login.html

@@ -1,4 +1,5 @@
 {% extends "base.html" %}
+{%- import "macros.html" as macros -%}
 {% block title %}Login - zero2prod{% endblock %}
 {% block content %}
   <div class="flex-1 flex items-center justify-center">
@@ -28,19 +29,21 @@
                    required
                    class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
           </div>
-          <div>
-            <button type="submit"
-                    class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors">
-              Continue
+          <button type="submit"
+                  hx-indicator="this"
+                  class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors">
+            <span class="continue-text">Continue</span>
+            <span class="htmx-indicator">
+              {% call macros::spinner(class="text-white", highlight_class="text-gray-500", size=20) %}
+              </span>
             </button>
-          </div>
-          <div id="login-messages" class="mt-4"></div>
-        </form>
-      </div>
-      <div class="text-center">
-        <a href="/"
-           class="text-sm text-blue-600 hover:text-blue-500 transition-colors">← Back to homepage</a>
+            <div id="login-messages" class="empty:hidden"></div>
+          </form>
+        </div>
+        <div class="text-center">
+          <a href="/"
+             class="text-sm text-blue-600 hover:text-blue-500 transition-colors">← Back to homepage</a>
+        </div>
       </div>
     </div>
-  </div>
-{% endblock %}
+  {% endblock %}