From e3219c740389672a47edad83e21d3c47dcdfa7ee Mon Sep 17 00:00:00 2001
From: Raphael Michel <michel@rami.io>
Date: Mon, 27 Jul 2026 16:25:21 +0200
Subject: [PATCH] Pretty loading state for logs

---
 .../templates/pretixcontrol/event/index.html  | 25 ++++++++++---
 .../static/pretixcontrol/scss/_dashboard.scss | 35 +++++++++++++++++++
 2 files changed, 56 insertions(+), 4 deletions(-)

diff --git a/src/pretix/control/templates/pretixcontrol/event/index.html b/src/pretix/control/templates/pretixcontrol/event/index.html
index 359249be63..dc02754ebb 100644
--- a/src/pretix/control/templates/pretixcontrol/event/index.html
+++ b/src/pretix/control/templates/pretixcontrol/event/index.html
@@ -121,10 +121,27 @@
                     {% trans "Event logs" %}
                 </h3>
             </div>
-            <ul class="list-group" hx-get="{% url "control:event.index.logs" organizer=request.organizer.slug event=request.event.slug %}" hx-trigger="load">
-                <div class="logs-lazy-loading">
-                    <span class="fa fa-cog fa-4x"></span>
-                </div>
+            <ul class="list-group"
+                hx-get="{% url "control:event.index.logs" organizer=request.organizer.slug event=request.event.slug %}"
+                hx-trigger="load">
+                {% for i in "12345" %}
+                    <li class="list-group-item logentry">
+                        <div class="row">
+                            <div class="col-lg-2 col-sm-6 col-xs-12">
+                                <span class="loading-mock loading-mock-text-medium"></span>
+                            </div>
+                            <div class="col-lg-2 col-sm-6 col-xs-12">
+                                <span class="loading-mock loading-mock-text-short"></span>
+                            </div>
+                            <div class="col-lg-2 col-sm-12 col-xs-12">
+                                <span class="loading-mock loading-mock-text-medium"></span>
+                            </div>
+                            <div class="col-lg-6 col-sm-12 col-xs-12">
+                                <span class="loading-mock loading-mock-text-long"></span>
+                            </div>
+                        </div>
+                    </li>
+                {% endfor %}
             </ul>
             <div class="panel-footer">
                 <a href="{% url "control:event.log" event=request.event.slug organizer=request.event.organizer.slug %}">
diff --git a/src/pretix/static/pretixcontrol/scss/_dashboard.scss b/src/pretix/static/pretixcontrol/scss/_dashboard.scss
index c86d9f9793..cf0446f0cd 100644
--- a/src/pretix/static/pretixcontrol/scss/_dashboard.scss
+++ b/src/pretix/static/pretixcontrol/scss/_dashboard.scss
@@ -10,6 +10,41 @@
   }
 }
 
+@keyframes loading-mock-pulse {
+  0% {
+    background-position: 20% 50%;
+  }
+  100% {
+    background-position: -100% 50%;
+  }
+}
+
+.loading-mock {
+  display: inline-block;
+  background: #eee;
+  border-radius: $border-radius-base;
+  height: 1em;
+  animation: loading-mock-pulse 3s infinite;
+  background-size: 200% 100%;
+  background-image: linear-gradient(
+        to right,
+        rgb(244, 247, 250) 0%,
+        rgb(255, 255, 255) 10%,
+        rgb(244, 247, 250) 20%
+  );
+
+  &.loading-mock-text-short {
+    width: 50px;
+  }
+  &.loading-mock-text-medium {
+    width: 100px;
+  }
+  &.loading-mock-text-long {
+    width: 200px;
+  }
+}
+
+
 .dashboard {
   display: flex;
   flex-wrap: wrap;