From 731066e8fc133cc44315e7ddc1d8dd26d5028799 Mon Sep 17 00:00:00 2001
From: Johannes Hoppe <info@johanneshoppe.com>
Date: Tue, 29 Sep 2020 14:47:06 +0200
Subject: [PATCH] Fix #1184 -- Replace loading gif with css animation

---
 .../static/debug_toolbar/css/toolbar.css          |  12 +++++++++++-
 .../static/debug_toolbar/img/ajax-loader.gif      | Bin 404 -> 0 bytes
 .../debug_toolbar/includes/panel_content.html     |   2 +-
 tests/panels/test_custom.py                       |   2 +-
 tests/panels/test_settings.py                     |   2 +-
 5 files changed, 14 insertions(+), 4 deletions(-)
 delete mode 100644 debug_toolbar/static/debug_toolbar/img/ajax-loader.gif

diff --git a/debug_toolbar/static/debug_toolbar/css/toolbar.css b/debug_toolbar/static/debug_toolbar/css/toolbar.css
index 439ad433d..15412b9e5 100644
--- a/debug_toolbar/static/debug_toolbar/css/toolbar.css
+++ b/debug_toolbar/static/debug_toolbar/css/toolbar.css
@@ -234,8 +234,18 @@
 }
 
 #djDebug .djDebugPanelContent .djdt-loader {
-    display: block;
     margin: 80px auto;
+    border: 6px solid white;
+    border-radius: 50%;
+    border-top: 6px solid #ffe761;
+    width: 38px;
+    height: 38px;
+    animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
 }
 
 #djDebug .djDebugPanelContent .djdt-scroll {
diff --git a/debug_toolbar/static/debug_toolbar/img/ajax-loader.gif b/debug_toolbar/static/debug_toolbar/img/ajax-loader.gif
deleted file mode 100644
index a7c3f2bacbe630950c16f53e3c27dd840f2e8622..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 404
zcmZ?wbhEHb)Mnsj_{hNU?%lhzw6s;LRsl)He^Smxsfi`2DGKG8B^e5dS&0=n`H3ld
znR#jX42nNl7`PZ17!?0=`?-b$J39ur8tEA@GXjNlfS3VfAOn+8OCQJSX*X{)e?H13
zeJ||u>DC8kZ4r?R)6{G4&Dyt|CtcU`diyE8Uq?3owA-;j!N^AxXd>8TMr31bj{uEP
z;7?56IIHFOnwrlu67PNQNtrQY{;7pt&RzvNJJ_?&Ze06Pg>MsMs)$s6#HZT6Q+}5p
z&C*E<I=&ueA`^;<Acq+MO<XxEEBa3UBYrO7?UfHJdzM^TuwobAGVVjKeUi;OpPxMU
z@@LSj8EZ_>81%TGdiiN4(8Lw%U?wsno9F=b>WnG7*rn?>{@R)9v%+M)yIi1FiTcrX
vD}VECG@HG3ZvWp+k0+)$$G&~0?NxTdRajt8g3>tw(O*m=3=Gzwa03GXAUBr*

diff --git a/debug_toolbar/templates/debug_toolbar/includes/panel_content.html b/debug_toolbar/templates/debug_toolbar/includes/panel_content.html
index 81d9bd36c..127152437 100644
--- a/debug_toolbar/templates/debug_toolbar/includes/panel_content.html
+++ b/debug_toolbar/templates/debug_toolbar/includes/panel_content.html
@@ -8,7 +8,7 @@ <h3>{{ panel.title }}</h3>
     </div>
     <div class="djDebugPanelContent">
       {% if toolbar.store_id %}
-        <img src="{% static 'debug_toolbar/img/ajax-loader.gif' %}" alt="loading" class="djdt-loader">
+        <div class="djdt-loader"></div>
         <div class="djdt-scroll"></div>
       {% else %}
         <div class="djdt-scroll">{{ panel.content }}</div>
diff --git a/tests/panels/test_custom.py b/tests/panels/test_custom.py
index 347199bc4..d279b3c22 100644
--- a/tests/panels/test_custom.py
+++ b/tests/panels/test_custom.py
@@ -37,7 +37,7 @@ def test_escapes_panel_title(self):
             <h3>Title with special chars &amp;&quot;&#39;&lt;&gt;</h3>
             </div>
             <div class="djDebugPanelContent">
-            <img class="djdt-loader" src="/static/debug_toolbar/img/ajax-loader.gif" alt="loading">
+            <div class="djdt-loader"></div>
             <div class="djdt-scroll"></div>
             </div>
             </div>
diff --git a/tests/panels/test_settings.py b/tests/panels/test_settings.py
index 596cce096..d398ae44f 100644
--- a/tests/panels/test_settings.py
+++ b/tests/panels/test_settings.py
@@ -28,7 +28,7 @@ def test_panel_title(self):
             <h3>Settings from None</h3>
             </div>
             <div class="djDebugPanelContent">
-            <img class="djdt-loader" src="/static/debug_toolbar/img/ajax-loader.gif" alt="loading">
+            <div class="djdt-loader"></div>
             <div class="djdt-scroll"></div>
             </div>
             </div>