From 761fa5969682d2458aa9c388f3473c7f3fa8268d Mon Sep 17 00:00:00 2001
From: Nicolas Boisteault <nboisteault@3liz.com>
Date: Fri, 17 May 2024 17:26:26 +0200
Subject: [PATCH] Reduce loading image size and get back previous white color
 on animation (#4452)

---
 lizmap/www/assets/css/img/loading.svg         | 1 +
 lizmap/www/assets/css/map.css                 | 2 +-
 lizmap/www/themes/default/css/img/loading.svg | 1 +
 lizmap/www/themes/default/css/map.css         | 5 +++--
 4 files changed, 6 insertions(+), 3 deletions(-)
 create mode 100644 lizmap/www/assets/css/img/loading.svg
 create mode 100644 lizmap/www/themes/default/css/img/loading.svg

diff --git a/lizmap/www/assets/css/img/loading.svg b/lizmap/www/assets/css/img/loading.svg
new file mode 100644
index 0000000000..7eb3bca3f6
--- /dev/null
+++ b/lizmap/www/assets/css/img/loading.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 561.1 561.1"><linearGradient id="a"><stop offset="0" stop-color="#43718C"><animate attributeName="stop-color" dur="3s" repeatCount="indefinite" values="#FFF; #43718C; #FFF"/></stop></linearGradient><path fill="url(#a)" d="M561 280.5a280.5 280.5 0 1 1-561 0 280.5 280.5 0 0 1 561 0"/><path fill="#fff" d="M86.6 279.6a295.8 295.8 0 0 0 141 23v-18.1h-92.2v-164H82.8V278l3.8 1.6m-3.8 12v32.6h144.8V315a308 308 0 0 1-144.8-23.4m224.8-7.2V265l-3 1.4a14.6 14.6 0 0 1-12.2-26.4c5.1-2.4 10.2-5 15.2-7.6v-61h-48.9v127c16.5-3.2 32.8-7.8 48.9-13.9m0-172.6h-48.9v39.8h48.9V112m-48.9 199v13.2h48.9v-26.5a312 312 0 0 1-48.9 13.2m171.5-139.5a363 363 0 0 1-34.3 35h26.7c10-11 19-22.8 27.2-35h-19.6m-39.6 0H347v35h2.5a342.5 342.5 0 0 0 41-35m26.5 58.5a306.7 306.7 0 0 1-57.4 43.5l-16 16.7v34.1h136.7v-35h-80.5l80.5-83.7v-34.1h-15.6a312.3 312.3 0 0 1-47.6 58.5M236.4 431.6h-23.1v-47.5a32 32 0 0 0-2-12.9c-2-3.9-5.5-5.8-10.6-5.8-9 0-13.6 7-13.6 21v45.2H164v-44.4c0-6.5-.6-11.3-1.9-14.4-1.9-5-5.5-7.4-10.9-7.4-9.2 0-13.8 7.4-13.8 22.4v43.8h-23v-73.9h12.8c5.4-7.7 13.1-11.2 23.3-11.2 13.5-.5 23.3 3 29.7 10.3a31.3 31.3 0 0 1 25-11c20.8 0 31.2 11.8 31.2 35.4v50.4m105.3.6h-23.1v-6.7a35.3 35.3 0 0 1-25 9.4c-12.6 0-23-4.3-31.1-12.9a44.7 44.7 0 0 1-12.3-32 42.8 42.8 0 0 1 43.5-43.8c15.1-.5 26 3.7 32.9 11.5h15zM319 389.6c0-6.9-2-12.6-6.3-17a21.5 21.5 0 0 0-16.4-6.8c-6.7 0-12.2 2.4-16.5 7.1a24.5 24.5 0 0 0-6.4 17c0 6.5 2 12.2 6 17.2 4.2 5.3 9.5 8 15.8 8 7.3 0 13-2.4 17.4-7.2a26.3 26.3 0 0 0 6.4-18.3m128 1.3c0 12.4-3.7 23.1-11.1 32-8 9.3-18.1 14-30.4 14a37.8 37.8 0 0 1-26.2-9.5v52l-23 11.2V357.7H369c5.8-7.7 16-11 30.5-12 16 0 28 4.5 36 13.3a45.8 45.8 0 0 1 11.5 32m-22.8 0c0-7.2-2.1-13.1-6.4-17.9-4.3-4.7-10-7-17.2-7-6.7 0-12 2.4-16 7.3-4 5-6 10.8-6 17.6 0 7 1.9 12.9 5.6 17.6a20 20 0 0 0 16 8 85 85 0 0 1 5.9-.7c2.5-.1 5-1.1 7.6-3 7-4.8 10.5-12.1 10.5-22"/></svg>
\ No newline at end of file
diff --git a/lizmap/www/assets/css/map.css b/lizmap/www/assets/css/map.css
index a337e0e600..516dc181ae 100644
--- a/lizmap/www/assets/css/map.css
+++ b/lizmap/www/assets/css/map.css
@@ -2318,7 +2318,7 @@ lizmap-mouse-position > div.coords-unit > select{
   display: none;
 }
 #loading {
-  background-image: url(img/loading.gif);
+  background-image: url(img/loading.svg);
   background-repeat: no-repeat;
   background-position-x: center;
   background-position-y: center;
diff --git a/lizmap/www/themes/default/css/img/loading.svg b/lizmap/www/themes/default/css/img/loading.svg
new file mode 100644
index 0000000000..7eb3bca3f6
--- /dev/null
+++ b/lizmap/www/themes/default/css/img/loading.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 561.1 561.1"><linearGradient id="a"><stop offset="0" stop-color="#43718C"><animate attributeName="stop-color" dur="3s" repeatCount="indefinite" values="#FFF; #43718C; #FFF"/></stop></linearGradient><path fill="url(#a)" d="M561 280.5a280.5 280.5 0 1 1-561 0 280.5 280.5 0 0 1 561 0"/><path fill="#fff" d="M86.6 279.6a295.8 295.8 0 0 0 141 23v-18.1h-92.2v-164H82.8V278l3.8 1.6m-3.8 12v32.6h144.8V315a308 308 0 0 1-144.8-23.4m224.8-7.2V265l-3 1.4a14.6 14.6 0 0 1-12.2-26.4c5.1-2.4 10.2-5 15.2-7.6v-61h-48.9v127c16.5-3.2 32.8-7.8 48.9-13.9m0-172.6h-48.9v39.8h48.9V112m-48.9 199v13.2h48.9v-26.5a312 312 0 0 1-48.9 13.2m171.5-139.5a363 363 0 0 1-34.3 35h26.7c10-11 19-22.8 27.2-35h-19.6m-39.6 0H347v35h2.5a342.5 342.5 0 0 0 41-35m26.5 58.5a306.7 306.7 0 0 1-57.4 43.5l-16 16.7v34.1h136.7v-35h-80.5l80.5-83.7v-34.1h-15.6a312.3 312.3 0 0 1-47.6 58.5M236.4 431.6h-23.1v-47.5a32 32 0 0 0-2-12.9c-2-3.9-5.5-5.8-10.6-5.8-9 0-13.6 7-13.6 21v45.2H164v-44.4c0-6.5-.6-11.3-1.9-14.4-1.9-5-5.5-7.4-10.9-7.4-9.2 0-13.8 7.4-13.8 22.4v43.8h-23v-73.9h12.8c5.4-7.7 13.1-11.2 23.3-11.2 13.5-.5 23.3 3 29.7 10.3a31.3 31.3 0 0 1 25-11c20.8 0 31.2 11.8 31.2 35.4v50.4m105.3.6h-23.1v-6.7a35.3 35.3 0 0 1-25 9.4c-12.6 0-23-4.3-31.1-12.9a44.7 44.7 0 0 1-12.3-32 42.8 42.8 0 0 1 43.5-43.8c15.1-.5 26 3.7 32.9 11.5h15zM319 389.6c0-6.9-2-12.6-6.3-17a21.5 21.5 0 0 0-16.4-6.8c-6.7 0-12.2 2.4-16.5 7.1a24.5 24.5 0 0 0-6.4 17c0 6.5 2 12.2 6 17.2 4.2 5.3 9.5 8 15.8 8 7.3 0 13-2.4 17.4-7.2a26.3 26.3 0 0 0 6.4-18.3m128 1.3c0 12.4-3.7 23.1-11.1 32-8 9.3-18.1 14-30.4 14a37.8 37.8 0 0 1-26.2-9.5v52l-23 11.2V357.7H369c5.8-7.7 16-11 30.5-12 16 0 28 4.5 36 13.3a45.8 45.8 0 0 1 11.5 32m-22.8 0c0-7.2-2.1-13.1-6.4-17.9-4.3-4.7-10-7-17.2-7-6.7 0-12 2.4-16 7.3-4 5-6 10.8-6 17.6 0 7 1.9 12.9 5.6 17.6a20 20 0 0 0 16 8 85 85 0 0 1 5.9-.7c2.5-.1 5-1.1 7.6-3 7-4.8 10.5-12.1 10.5-22"/></svg>
\ No newline at end of file
diff --git a/lizmap/www/themes/default/css/map.css b/lizmap/www/themes/default/css/map.css
index 2d3258ec05..cf30c6b2eb 100644
--- a/lizmap/www/themes/default/css/map.css
+++ b/lizmap/www/themes/default/css/map.css
@@ -860,11 +860,12 @@ lizmap-feature-toolbar button.btn:hover,
   display: none;
 }
 #loading {
-  background-image: url(img/loading.gif);
+  background-image: url(img/loading.svg);
   background-repeat: no-repeat;
   background-position-x: center;
   background-position-y: center;
-  filter: hue-rotate(140deg) brightness(70%);
+  background-size: contain;
+  background-origin: content-box;
 }