feat: Enhance media cleanup functionality with loading indicator and detailed results

templates/rad/media_cleanup.html

@@ -1,5 +1,23 @@
 {% extends 'base.html' %}
 
+{% block css %}
+    {{ block.super }}
+    <style>
+        .media-cleanup-loading.htmx-indicator {
+            display: none;
+        }
+        .media-cleanup-form.htmx-request .media-cleanup-loading.htmx-indicator {
+            display: flex;
+        }
+        .media-cleanup-form.htmx-request button,
+        .media-cleanup-form.htmx-request input,
+        .media-cleanup-form.htmx-request textarea {
+            pointer-events: none;
+            opacity: 0.7;
+        }
+    </style>
+{% endblock %}
+
 {% block content %}
     <div class="container-fluid py-4">
         <div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-4">
@@ -17,11 +35,13 @@
         <div class="card border-0 shadow-sm mb-4">
             <div class="card-body">
                 <form
+                    id="media-cleanup-form"
                     method="post"
                     hx-post="{% url 'media_cleanup' %}"
                     hx-target="#media-cleanup-result"
                     hx-swap="innerHTML"
-                    class="row g-3"
+                    hx-indicator="#media-cleanup-loading"
+                    class="row g-3 media-cleanup-form"
                 >
                     {% csrf_token %}
 
@@ -85,6 +105,11 @@
                             <i class="bi bi-trash me-1"></i> Delete unused files
                         </button>
                     </div>
+
+                    <div id="media-cleanup-loading" class="col-12 media-cleanup-loading htmx-indicator align-items-center gap-2 text-info">
+                        <div class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></div>
+                        <span>Cleanup in progress. This can take a while for large media directories.</span>
+                    </div>
                 </form>
             </div>
         </div>

templates/rad/partials/_media_cleanup_result.html

@@ -38,6 +38,7 @@
                     <div class="border rounded p-2 small">
                         <div class="text-muted">Recovered space</div>
                         <div><strong>{{ recovered_size|filesizeformat }}</strong></div>
+                        <div class="text-muted">{{ removed_file_count|default:0 }} file{{ removed_file_count|default:0|pluralize }} removed</div>
                     </div>
                 </div>
             </div>