Fix/Loader

Co-authored-by: Yehor Podporinov <[email protected]>

assets/loader.json

@@ -1 +1 @@
-{"v":"5.7.5","fr":100,"ip":0,"op":300,"w":900,"h":900,"nm":"Comp 1","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Foreground ring","sr":1,"ks":{"o":{"a":0,"k":100,"ix":2},"r":{"a":0,"k":0,"ix":2},"p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":2},"s":{"a":0,"k":[100,100],"ix":2}},"ao":0,"hd":false,"shapes":[{"ty":"gr","hd":false,"it":[{"ty":"el","hd":false,"d":1,"s":{"a":0,"k":[800,800],"ix":2},"p":{"a":0,"k":[0,0],"ix":2}},{"ty":"st","c":{"a":0,"k":[0.7843137254901961,0.6705882352941176,1],"ix":2},"o":{"a":0,"k":100,"ix":2},"w":{"a":0,"k":80,"ix":2},"hd":false,"lc":2,"lj":2},{"ty":"tm","s":{"a":0,"k":0,"ix":2},"e":{"a":1,"k":[{"t":41,"s":[100],"i":{"x":[1],"y":[1]},"o":{"x":[0.42],"y":[0]}},{"t":156,"s":[10],"i":{"x":[0.58],"y":[1]},"o":{"x":[0],"y":[0]}},{"t":275,"s":[100],"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}}],"ix":2},"o":{"a":1,"k":[{"t":41,"s":[0],"i":{"x":[1],"y":[1]},"o":{"x":[0.42],"y":[0]}},{"t":156,"s":[720],"i":{"x":[0.58],"y":[1]},"o":{"x":[0],"y":[0]}},{"t":275,"s":[1080],"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}}],"ix":2},"m":1,"hd":false},{"ty":"tr","hd":false,"p":{"a":0,"k":[450,450],"ix":2},"a":{"a":0,"k":[0,0],"ix":2},"s":{"a":0,"k":[100,100],"ix":2},"r":{"a":0,"k":0,"ix":2},"o":{"a":0,"k":100,"ix":2},"sk":{"a":0,"k":0,"ix":2},"sa":{"a":0,"k":0,"ix":2}}]}],"ip":0,"op":300,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Background ring","sr":1,"ks":{"o":{"a":0,"k":100,"ix":2},"r":{"a":0,"k":0,"ix":2},"p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":2},"s":{"a":0,"k":[100,100],"ix":2}},"ao":0,"hd":false,"shapes":[{"ty":"gr","hd":false,"it":[{"ty":"el","hd":false,"d":1,"s":{"a":0,"k":[800,800],"ix":2},"p":{"a":0,"k":[0,0],"ix":2}},{"ty":"st","c":{"a":0,"k":[0.8980392156862745,0.8941176470588236,0.9294117647058824],"ix":2},"o":{"a":0,"k":100,"ix":2},"w":{"a":0,"k":80,"ix":2},"hd":false,"lc":2,"lj":2},{"ty":"tm","s":{"a":0,"k":0,"ix":2},"e":{"a":0,"k":100,"ix":2},"o":{"a":0,"k":0,"ix":2},"m":1,"hd":false},{"ty":"tr","hd":false,"p":{"a":0,"k":[450,450],"ix":2},"a":{"a":0,"k":[0,0],"ix":2},"s":{"a":0,"k":[100,100],"ix":2},"r":{"a":0,"k":0,"ix":2},"o":{"a":0,"k":100,"ix":2},"sk":{"a":0,"k":0,"ix":2},"sa":{"a":0,"k":0,"ix":2}}]}],"ip":0,"op":300,"st":0,"bm":0}],"markers":[]}
+{"v":"5.7.5","fr":100,"ip":0,"op":216.66666666666669,"w":300,"h":100,"nm":"Comp 1","ddd":0,"assets":[{"id":"1","layers":[{"ddd":0,"ind":1,"ty":3,"nm":"","sr":1,"ks":{"o":{"a":0,"k":100,"ix":2},"r":{"a":0,"k":0,"ix":2},"p":{"a":1,"k":[{"t":117,"s":[10388.699,10300],"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]},"ti":[0,0],"to":[0,0]},{"t":150,"s":[10388.699,10275],"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]},"ti":[0,0],"to":[0,0]},{"t":183,"s":[10388.699,10325],"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]},"ti":[0,0],"to":[0,0]},{"t":217,"s":[10388.699,10300],"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}}],"ix":2},"a":{"a":0,"k":[-247.301,-57.301],"ix":2},"s":{"a":0,"k":[100,100],"ix":2}},"ao":0,"ip":0,"op":216.66666666666669,"st":0,"bm":0,"hd":false},{"ddd":0,"ind":2,"ty":4,"nm":"Ellipse Path 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":2},"r":{"a":0,"k":0,"ix":2},"p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":2},"s":{"a":0,"k":[100,100],"ix":2}},"ao":0,"hd":false,"parent":1,"shapes":[{"ty":"gr","hd":false,"it":[{"ty":"el","hd":false,"d":1,"s":{"a":0,"k":[25.398,25.398],"ix":2},"p":{"a":0,"k":[0,0],"ix":2}},{"ty":"st","c":{"a":0,"k":[0.5333333333333333,0.5333333333333333,0.5333333333333333],"ix":2},"o":{"a":0,"k":0,"ix":2},"w":{"a":0,"k":0,"ix":2},"hd":false,"lc":2,"lj":2},{"ty":"fl","c":{"a":0,"k":[0.7843137254901961,0.6705882352941176,1],"ix":2},"o":{"a":0,"k":100,"ix":2},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":2},"e":{"a":0,"k":100,"ix":2},"o":{"a":0,"k":0,"ix":2},"m":1,"hd":false},{"ty":"tr","hd":false,"p":{"a":0,"k":[-247.3009948730469,-57.30099868774414],"ix":2},"a":{"a":0,"k":[0,0],"ix":2},"s":{"a":0,"k":[100,100],"ix":2},"r":{"a":0,"k":0,"ix":2},"o":{"a":0,"k":100,"ix":2},"sk":{"a":0,"k":0,"ix":2},"sa":{"a":0,"k":0,"ix":2}}]}],"ip":0,"op":216.66666666666669,"st":0,"bm":0}]}],"layers":[{"ddd":0,"refId":"1","w":20000,"h":20000,"ind":3,"ty":0,"nm":"Shape Layer 4 (In/Out)","sr":1,"ks":{"o":{"a":1,"k":[{"t":16,"s":[0],"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"t":17,"s":[100],"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"t":516,"s":[100],"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}},{"t":517,"s":[0],"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}}],"ix":2},"r":{"a":0,"k":0,"ix":2},"p":{"a":0,"k":[-148.69901275634766,-250],"ix":2},"a":{"a":0,"k":[10000,10000],"ix":2},"s":{"a":0,"k":[100,100],"ix":2}},"ao":0,"ip":0,"op":216.66666666666669,"st":0,"bm":0,"hd":false},{"ddd":0,"ind":4,"ty":3,"nm":"","sr":1,"ks":{"o":{"a":0,"k":100,"ix":2},"r":{"a":0,"k":0,"ix":2},"p":{"a":1,"k":[{"t":100,"s":[180.30098724365234,50],"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]},"ti":[0,0],"to":[0,0]},{"t":133,"s":[180.30098724365234,25],"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]},"ti":[0,0],"to":[0,0]},{"t":167,"s":[180.30098724365234,75],"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]},"ti":[0,0],"to":[0,0]},{"t":200,"s":[180.30098724365234,50],"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}}],"ix":2},"a":{"a":0,"k":[-247.301,-57.301],"ix":2},"s":{"a":0,"k":[100,100],"ix":2}},"ao":0,"ip":0,"op":216.66666666666669,"st":0,"bm":0,"hd":false},{"ddd":0,"ind":5,"ty":4,"nm":"Ellipse Path 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":2},"r":{"a":0,"k":0,"ix":2},"p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":2},"s":{"a":0,"k":[100,100],"ix":2}},"ao":0,"hd":false,"parent":4,"shapes":[{"ty":"gr","hd":false,"it":[{"ty":"el","hd":false,"d":1,"s":{"a":0,"k":[25.398,25.398],"ix":2},"p":{"a":0,"k":[0,0],"ix":2}},{"ty":"st","c":{"a":0,"k":[0.5333333333333333,0.5333333333333333,0.5333333333333333],"ix":2},"o":{"a":0,"k":0,"ix":2},"w":{"a":0,"k":0,"ix":2},"hd":false,"lc":2,"lj":2},{"ty":"fl","c":{"a":0,"k":[0.7843137254901961,0.6705882352941176,1],"ix":2},"o":{"a":0,"k":100,"ix":2},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":2},"e":{"a":0,"k":100,"ix":2},"o":{"a":0,"k":0,"ix":2},"m":1,"hd":false},{"ty":"tr","hd":false,"p":{"a":0,"k":[-247.3009948730469,-57.30099868774414],"ix":2},"a":{"a":0,"k":[0,0],"ix":2},"s":{"a":0,"k":[100,100],"ix":2},"r":{"a":0,"k":0,"ix":2},"o":{"a":0,"k":100,"ix":2},"sk":{"a":0,"k":0,"ix":2},"sa":{"a":0,"k":0,"ix":2}}]}],"ip":0,"op":216.66666666666669,"st":0,"bm":0},{"ddd":0,"ind":6,"ty":3,"nm":"","sr":1,"ks":{"o":{"a":0,"k":100,"ix":2},"r":{"a":0,"k":0,"ix":2},"p":{"a":1,"k":[{"t":83,"s":[120.30098724365234,50],"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]},"ti":[0,0],"to":[0,0]},{"t":117,"s":[120.30098724365234,25],"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]},"ti":[0,0],"to":[0,0]},{"t":150,"s":[120.30098724365234,75],"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]},"ti":[0,0],"to":[0,0]},{"t":183,"s":[120.30098724365234,50],"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}}],"ix":2},"a":{"a":0,"k":[-247.301,-57.301],"ix":2},"s":{"a":0,"k":[100,100],"ix":2}},"ao":0,"ip":0,"op":216.66666666666669,"st":0,"bm":0,"hd":false},{"ddd":0,"ind":7,"ty":4,"nm":"Ellipse Path 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":2},"r":{"a":0,"k":0,"ix":2},"p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":2},"s":{"a":0,"k":[100,100],"ix":2}},"ao":0,"hd":false,"parent":6,"shapes":[{"ty":"gr","hd":false,"it":[{"ty":"el","hd":false,"d":1,"s":{"a":0,"k":[25.398,25.398],"ix":2},"p":{"a":0,"k":[0,0],"ix":2}},{"ty":"st","c":{"a":0,"k":[0.5333333333333333,0.5333333333333333,0.5333333333333333],"ix":2},"o":{"a":0,"k":0,"ix":2},"w":{"a":0,"k":0,"ix":2},"hd":false,"lc":2,"lj":2},{"ty":"fl","c":{"a":0,"k":[0.7843137254901961,0.6705882352941176,1],"ix":2},"o":{"a":0,"k":100,"ix":2},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":2},"e":{"a":0,"k":100,"ix":2},"o":{"a":0,"k":0,"ix":2},"m":1,"hd":false},{"ty":"tr","hd":false,"p":{"a":0,"k":[-247.3009948730469,-57.30099868774414],"ix":2},"a":{"a":0,"k":[0,0],"ix":2},"s":{"a":0,"k":[100,100],"ix":2},"r":{"a":0,"k":0,"ix":2},"o":{"a":0,"k":100,"ix":2},"sk":{"a":0,"k":0,"ix":2},"sa":{"a":0,"k":0,"ix":2}}]}],"ip":0,"op":216.66666666666669,"st":0,"bm":0},{"ddd":0,"ind":8,"ty":3,"nm":"","sr":1,"ks":{"o":{"a":0,"k":100,"ix":2},"r":{"a":0,"k":0,"ix":2},"p":{"a":1,"k":[{"t":67,"s":[60.300987243652344,50],"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]},"ti":[0,0],"to":[0,0]},{"t":100,"s":[60.300987243652344,25],"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]},"ti":[0,0],"to":[0,0]},{"t":133,"s":[60.300987243652344,75],"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]},"ti":[0,0],"to":[0,0]},{"t":167,"s":[60.300987243652344,50],"i":{"x":[1],"y":[1]},"o":{"x":[0],"y":[0]}}],"ix":2},"a":{"a":0,"k":[-247.301,-57.301],"ix":2},"s":{"a":0,"k":[100,100],"ix":2}},"ao":0,"ip":0,"op":216.66666666666669,"st":0,"bm":0,"hd":false},{"ddd":0,"ind":9,"ty":4,"nm":"Ellipse Path 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":2},"r":{"a":0,"k":0,"ix":2},"p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":2},"s":{"a":0,"k":[100,100],"ix":2}},"ao":0,"hd":false,"parent":8,"shapes":[{"ty":"gr","hd":false,"it":[{"ty":"el","hd":false,"d":1,"s":{"a":0,"k":[25.398,25.398],"ix":2},"p":{"a":0,"k":[0,0],"ix":2}},{"ty":"st","c":{"a":0,"k":[0.5333333333333333,0.5333333333333333,0.5333333333333333],"ix":2},"o":{"a":0,"k":0,"ix":2},"w":{"a":0,"k":0,"ix":2},"hd":false,"lc":2,"lj":2},{"ty":"fl","c":{"a":0,"k":[0.7843137254901961,0.6705882352941176,1],"ix":2},"o":{"a":0,"k":100,"ix":2},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":2},"e":{"a":0,"k":100,"ix":2},"o":{"a":0,"k":0,"ix":2},"m":1,"hd":false},{"ty":"tr","hd":false,"p":{"a":0,"k":[-247.3009948730469,-57.30099868774414],"ix":2},"a":{"a":0,"k":[0,0],"ix":2},"s":{"a":0,"k":[100,100],"ix":2},"r":{"a":0,"k":0,"ix":2},"o":{"a":0,"k":100,"ix":2},"sk":{"a":0,"k":0,"ix":2},"sa":{"a":0,"k":0,"ix":2}}]}],"ip":0,"op":216.66666666666669,"st":0,"bm":0}],"markers":[]}

components/loader/Spinner.vue → components/AppLoader.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="spinner">
+  <div class="app-loader">
     <client-only>
       <vue3-lottie
-        class="spinner__inner"
+        class="app-loader__inner"
         :animation-data="animationData"
         loop
       />
@@ -16,8 +16,8 @@ import { Vue3Lottie } from 'vue3-lottie'
 </script>
 
 <style lang="scss" scoped>
-.spinner__inner {
-  width: toRem(80);
-  height: toRem(80);
+.app-loader__inner {
+  width: toRem(96);
+  height: toRem(32);
 }
 </style>

forms/AbiDecodeForm.vue

@@ -22,7 +22,7 @@
       v-if="isDecoding || errorMessage || form.args.length"
       class="abi-decode-form__output"
     >
-      <loader v-if="isDecoding" />
+      <app-loader v-if="isDecoding" />
       <template v-else>
         <div v-if="errorMessage" class="abi-decode-form__msg-wrp">
           <app-icon
@@ -140,7 +140,7 @@
 </template>
 
 <script lang="ts" setup>
-import { AppButton, AppIcon, Loader } from '#components'
+import { AppButton, AppIcon, AppLoader } from '#components'
 import { useFormValidation } from '@/composables'
 import { ETHEREUM_TYPES } from '@/enums'
 import { errors } from '@/errors'