Change loading spinners

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;

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>