From 78091715d78a5cee72b4d12fa0700860fb7c59fe Mon Sep 17 00:00:00 2001
From: LucHeart <luca@perugia.ovh>
Date: Wed, 27 Sep 2023 15:29:43 +0200
Subject: [PATCH] Change loading spinners

---
 src/assets/images/Icon.svg               | 24 ++++++++++++++++
 src/assets/images/IconLoadingSpin.svg    | 24 ++++++++++++++++
 src/views/dashboard/shockers/own/Own.vue |  5 ++++
 src/views/utils/Loading.vue              | 36 ++----------------------
 4 files changed, 56 insertions(+), 33 deletions(-)
 create mode 100644 src/assets/images/Icon.svg
 create mode 100644 src/assets/images/IconLoadingSpin.svg

diff --git a/src/assets/images/Icon.svg b/src/assets/images/Icon.svg
new file mode 100644
index 0000000..7ab62d0
--- /dev/null
+++ b/src/assets/images/Icon.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="399.99554"
+   height="400"
+   viewBox="0 0 399.99554 400"
+   version="1.1"
+   id="svg1"
+   xml:space="preserve"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs1" /><g
+     id="layer1"
+     style="display:inline"
+     transform="translate(-50.125,-49.875)"><g
+       id="g134"><path
+         id="path47"
+         style="display:inline;opacity:1;fill:#e14a6d;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.194537;stroke-dasharray:none;stroke-opacity:1"
+         d="m 250.125,49.875 c -110.45695,0 -200,89.54305 -200,200 0.136733,40.33129 12.463529,79.668 35.346275,112.85402 0.424759,0.61601 1.146318,0.63479 1.606995,0.0452 l 15.78877,-20.20849 c 0.46068,-0.58964 0.50896,-1.57971 0.11339,-2.21485 -3.738483,-6.00277 -7.10552,-12.22969 -10.081992,-18.64575 -3.41956,-7.48995 -6.299937,-15.21469 -8.619141,-23.11524 -2.318965,-7.90069 -4.070819,-15.957 -5.242188,-24.10742 -1.171518,-8.1501 -1.759602,-16.37349 -1.759765,-24.60742 1.63e-4,-8.23393 0.588247,-16.45732 1.759765,-24.60742 1.171369,-8.15042 2.923223,-16.20673 5.242188,-24.10742 2.319204,-7.90055 5.199581,-15.62529 8.619141,-23.11524 3.419095,-7.48973 7.368602,-14.72559 11.818362,-21.65234 4.45007,-6.92696 9.38907,-13.52709 14.77929,-19.75 5.38987,-6.22302 11.2172,-12.05296 17.4375,-17.44531 6.22043,-5.39234 12.81795,-10.3333 19.74219,-14.78516 6.9249,-4.451341 14.1588,-8.40215 21.64649,-11.822266 7.48681,-3.420351 15.20828,-6.301379 23.10546,-8.621094 7.89749,-2.31979 15.95054,-4.072296 24.09766,-5.244141 8.14748,-1.172449 16.36827,-1.761187 24.59961,-1.761718 2.82811,2.47e-4 5.65578,0.06993 8.48047,0.208984 2.825,0.13905 5.64616,0.347446 8.46094,0.625 2.81472,0.277388 5.6222,0.623847 8.41992,1.039063 2.79789,0.41458 5.58519,0.897798 8.35937,1.449218 2.77392,0.552601 5.53387,1.17323 8.27735,1.861328 2.744,0.686855 5.47073,1.440988 8.17773,2.261719 2.70628,0.821964 5.39199,1.710253 8.05469,2.664063 2.66324,0.952634 5.3027,1.970519 7.91601,3.052734 2.61303,1.082832 5.19909,2.229662 7.75586,3.439453 2.55688,1.209916 5.08368,2.482434 7.57813,3.816406 2.49413,1.333914 4.95516,2.728861 7.38086,4.183591 2.42609,1.45413 4.81613,2.96761 7.16797,4.53907 2.35148,1.57254 4.66403,3.20259 6.93554,4.88867 0.79898,0.60786 1.59264,1.22266 2.3809,1.84434 0.58753,0.46337 1.43396,0.36516 1.89463,-0.22448 l 15.01926,-19.224101 c 0.46067,-0.58964 0.35656,-1.441654 -0.23601,-1.898554 C 337.19307,64.536718 294.29034,49.896929 250.125,49.875 Z m 172.84233,201.35483 c -0.0611,7.78101 -0.64718,15.54954 -1.75444,23.25259 -1.17137,8.15042 -2.92322,16.20673 -5.24219,24.10742 -2.3192,7.90055 -5.19958,15.62529 -8.61914,23.11524 -3.41909,7.48973 -7.3686,14.72559 -11.81836,21.65234 -4.45007,6.92696 -9.38907,13.52709 -14.77929,19.75 -5.38987,6.22302 -11.2172,12.05296 -17.4375,17.44531 -6.22043,5.39234 -12.81795,10.3333 -19.74219,14.78516 -6.9249,4.45134 -14.1588,8.40215 -21.64649,11.82227 -7.48681,3.42035 -15.20828,6.30138 -23.10546,8.62109 -7.89749,2.31979 -15.95054,4.0723 -24.09766,5.24414 -8.14748,1.17245 -16.36827,1.76119 -24.59961,1.76172 -8.23134,-5.3e-4 -16.45213,-0.58927 -24.59961,-1.76172 -8.14712,-1.17184 -16.20017,-2.92435 -24.09766,-5.24414 -2.02649,-0.70432 -4.03966,-1.44632 -6.03846,-2.22559 -0.69715,-0.27179 -1.63381,-0.0191 -2.09447,0.57057 l -15.76538,20.17918 c -0.46066,0.58964 -0.2717,1.29489 0.42417,1.56996 22.98176,9.0845 47.45202,13.83263 72.17141,13.99963 110.00499,0 199.26687,-88.81177 199.99551,-198.64517 0.005,-0.74824 -0.60209,-1.35483 -1.35035,-1.35483 l -24.44266,0 c -0.74826,0 -1.3543,0.60659 -1.36017,1.35483 z m -306.63357,109.83383 -15.45853,19.78283 c -0.46072,0.5896 -0.41525,1.50624 0.10563,2.04343 1.50031,1.54728 3.02553,3.07021 4.57507,4.56819 0.53797,0.52007 1.35074,0.46039 1.81143,-0.12923 l 15.10903,-19.33745 c 0.46069,-0.58962 0.39831,-1.48949 -0.13475,-2.0146 -0.95965,-0.94534 -1.90823,-1.90187 -2.84555,-2.86941 -0.51305,-0.66982 -1.02119,-1.34339 -1.52438,-2.02065 -0.44625,-0.60062 -1.17723,-0.61271 -1.63795,-0.0231 z m 22.06646,22.27933 -14.6559,18.75738 c -0.46069,0.58962 -0.37298,1.46164 0.19957,1.94338 1.6323,1.37341 3.28647,2.72063 4.96187,4.04112 0.58767,0.46318 1.44033,0.35704 1.90099,-0.23261 l 14.8826,-19.05022 c 0.46066,-0.58965 0.33883,-1.41791 -0.26828,-1.8553 -1.73042,-1.24665 -3.43762,-2.52523 -5.12075,-3.83508 -0.59051,-0.45955 -1.43941,-0.35829 -1.9001,0.23133 z m 25.73043,17.58982 -14.91169,19.08359 c -0.46071,0.58961 -0.3227,1.39366 0.31128,1.79111 1.82562,1.14451 3.66962,2.25944 5.53127,3.34436 0.64649,0.37676 1.54628,0.20018 2.0069,-0.38949 l 15.16006,-19.40757 c 0.46062,-0.58967 0.29382,-1.34361 -0.36955,-1.68978 -1.92614,-1.00513 -3.83318,-2.0465 -5.72008,-3.12356 -0.64984,-0.37093 -1.54748,-0.19827 -2.00819,0.39134 z" /><path
+         style="display:inline;opacity:1;fill:#afe3fe;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.2;stroke-dasharray:none;stroke-opacity:1"
+         d="M 279,112 254.5,232.5 H 328 L 221,388 245.5,267.5 H 172 Z"
+         id="path134" /></g></g>
+</svg>
diff --git a/src/assets/images/IconLoadingSpin.svg b/src/assets/images/IconLoadingSpin.svg
new file mode 100644
index 0000000..adbfaba
--- /dev/null
+++ b/src/assets/images/IconLoadingSpin.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg width="399.99554" height="400" viewBox="0 0 399.99554 400" version="1.1" id="svg1" xml:space="preserve"
+  xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+  <defs id="defs1" />
+  <g id="layer1" style="display:inline" transform="translate(-50.125,-49.875)">
+    <g id="g134">
+      <path id="path47"
+        style="display:inline;opacity:1;fill:#e14a6d;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.194537;stroke-dasharray:none;stroke-opacity:1"
+        d="m 250.125,49.875 c -110.45695,0 -200,89.54305 -200,200 0.136733,40.33129 12.463529,79.668 35.346275,112.85402 0.424759,0.61601 1.146318,0.63479 1.606995,0.0452 l 15.78877,-20.20849 c 0.46068,-0.58964 0.50896,-1.57971 0.11339,-2.21485 -3.738483,-6.00277 -7.10552,-12.22969 -10.081992,-18.64575 -3.41956,-7.48995 -6.299937,-15.21469 -8.619141,-23.11524 -2.318965,-7.90069 -4.070819,-15.957 -5.242188,-24.10742 -1.171518,-8.1501 -1.759602,-16.37349 -1.759765,-24.60742 1.63e-4,-8.23393 0.588247,-16.45732 1.759765,-24.60742 1.171369,-8.15042 2.923223,-16.20673 5.242188,-24.10742 2.319204,-7.90055 5.199581,-15.62529 8.619141,-23.11524 3.419095,-7.48973 7.368602,-14.72559 11.818362,-21.65234 4.45007,-6.92696 9.38907,-13.52709 14.77929,-19.75 5.38987,-6.22302 11.2172,-12.05296 17.4375,-17.44531 6.22043,-5.39234 12.81795,-10.3333 19.74219,-14.78516 6.9249,-4.451341 14.1588,-8.40215 21.64649,-11.822266 7.48681,-3.420351 15.20828,-6.301379 23.10546,-8.621094 7.89749,-2.31979 15.95054,-4.072296 24.09766,-5.244141 8.14748,-1.172449 16.36827,-1.761187 24.59961,-1.761718 2.82811,2.47e-4 5.65578,0.06993 8.48047,0.208984 2.825,0.13905 5.64616,0.347446 8.46094,0.625 2.81472,0.277388 5.6222,0.623847 8.41992,1.039063 2.79789,0.41458 5.58519,0.897798 8.35937,1.449218 2.77392,0.552601 5.53387,1.17323 8.27735,1.861328 2.744,0.686855 5.47073,1.440988 8.17773,2.261719 2.70628,0.821964 5.39199,1.710253 8.05469,2.664063 2.66324,0.952634 5.3027,1.970519 7.91601,3.052734 2.61303,1.082832 5.19909,2.229662 7.75586,3.439453 2.55688,1.209916 5.08368,2.482434 7.57813,3.816406 2.49413,1.333914 4.95516,2.728861 7.38086,4.183591 2.42609,1.45413 4.81613,2.96761 7.16797,4.53907 2.35148,1.57254 4.66403,3.20259 6.93554,4.88867 0.79898,0.60786 1.59264,1.22266 2.3809,1.84434 0.58753,0.46337 1.43396,0.36516 1.89463,-0.22448 l 15.01926,-19.224101 c 0.46067,-0.58964 0.35656,-1.441654 -0.23601,-1.898554 C 337.19307,64.536718 294.29034,49.896929 250.125,49.875 Z m 172.84233,201.35483 c -0.0611,7.78101 -0.64718,15.54954 -1.75444,23.25259 -1.17137,8.15042 -2.92322,16.20673 -5.24219,24.10742 -2.3192,7.90055 -5.19958,15.62529 -8.61914,23.11524 -3.41909,7.48973 -7.3686,14.72559 -11.81836,21.65234 -4.45007,6.92696 -9.38907,13.52709 -14.77929,19.75 -5.38987,6.22302 -11.2172,12.05296 -17.4375,17.44531 -6.22043,5.39234 -12.81795,10.3333 -19.74219,14.78516 -6.9249,4.45134 -14.1588,8.40215 -21.64649,11.82227 -7.48681,3.42035 -15.20828,6.30138 -23.10546,8.62109 -7.89749,2.31979 -15.95054,4.0723 -24.09766,5.24414 -8.14748,1.17245 -16.36827,1.76119 -24.59961,1.76172 -8.23134,-5.3e-4 -16.45213,-0.58927 -24.59961,-1.76172 -8.14712,-1.17184 -16.20017,-2.92435 -24.09766,-5.24414 -2.02649,-0.70432 -4.03966,-1.44632 -6.03846,-2.22559 -0.69715,-0.27179 -1.63381,-0.0191 -2.09447,0.57057 l -15.76538,20.17918 c -0.46066,0.58964 -0.2717,1.29489 0.42417,1.56996 22.98176,9.0845 47.45202,13.83263 72.17141,13.99963 110.00499,0 199.26687,-88.81177 199.99551,-198.64517 0.005,-0.74824 -0.60209,-1.35483 -1.35035,-1.35483 l -24.44266,0 c -0.74826,0 -1.3543,0.60659 -1.36017,1.35483 z m -306.63357,109.83383 -15.45853,19.78283 c -0.46072,0.5896 -0.41525,1.50624 0.10563,2.04343 1.50031,1.54728 3.02553,3.07021 4.57507,4.56819 0.53797,0.52007 1.35074,0.46039 1.81143,-0.12923 l 15.10903,-19.33745 c 0.46069,-0.58962 0.39831,-1.48949 -0.13475,-2.0146 -0.95965,-0.94534 -1.90823,-1.90187 -2.84555,-2.86941 -0.51305,-0.66982 -1.02119,-1.34339 -1.52438,-2.02065 -0.44625,-0.60062 -1.17723,-0.61271 -1.63795,-0.0231 z m 22.06646,22.27933 -14.6559,18.75738 c -0.46069,0.58962 -0.37298,1.46164 0.19957,1.94338 1.6323,1.37341 3.28647,2.72063 4.96187,4.04112 0.58767,0.46318 1.44033,0.35704 1.90099,-0.23261 l 14.8826,-19.05022 c 0.46066,-0.58965 0.33883,-1.41791 -0.26828,-1.8553 -1.73042,-1.24665 -3.43762,-2.52523 -5.12075,-3.83508 -0.59051,-0.45955 -1.43941,-0.35829 -1.9001,0.23133 z m 25.73043,17.58982 -14.91169,19.08359 c -0.46071,0.58961 -0.3227,1.39366 0.31128,1.79111 1.82562,1.14451 3.66962,2.25944 5.53127,3.34436 0.64649,0.37676 1.54628,0.20018 2.0069,-0.38949 l 15.16006,-19.40757 c 0.46062,-0.58967 0.29382,-1.34361 -0.36955,-1.68978 -1.92614,-1.00513 -3.83318,-2.0465 -5.72008,-3.12356 -0.64984,-0.37093 -1.54748,-0.19827 -2.00819,0.39134 z" />
+
+    </g>
+  </g>
+
+  <animateTransform href="#g134"
+  attributeName="transform"
+  type="rotate"
+  from="0 250 250"
+  to="360 250 250" dur="1s"
+  
+  repeatCount="indefinite" />
+
+</svg>
\ No newline at end of file
diff --git a/src/views/dashboard/shockers/own/Own.vue b/src/views/dashboard/shockers/own/Own.vue
index e6fb15a..25955b2 100644
--- a/src/views/dashboard/shockers/own/Own.vue
+++ b/src/views/dashboard/shockers/own/Own.vue
@@ -4,6 +4,8 @@
         <i class="fa-solid fa-plus"></i>
       </div>
 
+    <loading v-if="loadingShockers"/>
+
     <b-container>
         <b-row v-for="item in ownShockers" :key="item.id">
             <device :device="item"></device>
@@ -95,6 +97,7 @@ export default {
     components: {Loading, Device},
     data() {
         return {
+            loadingShockers: true,
             ownShockers: [],
             devices: [],
             modelOptions: [
@@ -193,6 +196,8 @@ export default {
                     }
                 });
             });
+
+            this.loadingShockers = false;
         },
         async loadDevices() {
             this.devicesLoading = true;
diff --git a/src/views/utils/Loading.vue b/src/views/utils/Loading.vue
index 4dfcb10..e44d192 100644
--- a/src/views/utils/Loading.vue
+++ b/src/views/utils/Loading.vue
@@ -1,46 +1,16 @@
 <template>
-  <svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
-    <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none"/>
-  </svg>
+  <img class="loading" src="@/assets/images/IconLoadingSpin.svg">
 </template>
 
 <script>
-export default {
-  name: "Loading"
-}
+export default { }
 </script>
 
 <style scoped lang="scss">
-
-.checkmark__circle {
-  stroke-dasharray: 166;
-  stroke-width: 2;
-  stroke-miterlimit: 10;
-  stroke: var(--color);
-  fill: none;
-  animation: stroke 0.6s infinite;
-  transform-origin: center;
-  animation-timing-function: linear;
-  stroke-dashoffset: 130;
-}
-
-.checkmark {
-  --color: #7ac142;
-
+.loading {
   width: 100px;
   height: 100px;
-  border-radius: 50%;
   display: block;
-  stroke-width: 2;
-  stroke: #fff;
-  stroke-miterlimit: 10;
   margin: 10% auto;
-  box-shadow: inset 0 0 0 var(--color);
-}
-
-@keyframes stroke {
-  100% {
-    transform: rotate(360deg);
-  }
 }
 </style>