feat: implement loader into miieditor

src/components/Loader.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="loader" />
+</template>
+
+<style scoped>
+.loader {
+	width: 2em;
+	display: inline-block;
+	aspect-ratio: 2;
+	--_g: no-repeat radial-gradient(circle closest-side, currentColor 90%, #0000);
+	background:
+		var(--_g) 0% 50%,
+		var(--_g) 50% 50%,
+		var(--_g) 100% 50%;
+	background-size: calc(100%/3) 50%;
+	animation: loader-anim 1s infinite linear;
+}
+</style>
+
+<style>
+@keyframes loader-anim {
+	20% {
+		background-position: 0% 0%, 50% 50%, 100% 50%
+	}
+	40% {
+		background-position: 0% 100%, 50% 0%, 100% 50%
+	}
+	60% {
+		background-position: 0% 50%, 50% 100%, 100% 0%
+	}
+	80% {
+		background-position: 0% 50%, 50% 50%, 100% 100%
+	}
+}
+</style>

src/pages/account/miieditor/index.vue

@@ -30,6 +30,7 @@ const miiDataString: string = profile.value?.mii?.data || fallbackMiiData;
 const activeTab = ref<string>('faceType');
 const activeSubTab = ref<string>('faceType');
 const activeSubPage = ref<number>(0);
+const hasSaved = ref(false);
 // mii rendering business
 const mii = ref<any>(null);
 const miiCanvas = ref<any>(null);
@@ -287,10 +288,7 @@ const { isLoading: isSaving, execute } = useAsync({
 		});
 	},
 	onSuccess() {
-		toasts.publish({
-			type: 'success',
-			text: t('miiEditor.miiSaved')
-		});
+		hasSaved.value = true;
 		setTimeout(() => {
 			navigateTo('/account');
 		}, 3000);
@@ -306,7 +304,7 @@ const { isLoading: isSaving, execute } = useAsync({
 </script>
 
 <template>
-  <div :class="{ 'miieditor-wrapper': true, saving: isSaving }">
+  <div :class="{ 'miieditor-wrapper': true, saving: hasSaved }">
     <svg
       class="logotype"
       xmlns="http://www.w3.org/2000/svg"
@@ -658,7 +656,8 @@ const { isLoading: isSaving, execute } = useAsync({
                       :class="{ button: true, primary: true }"
                       @click.prevent="execute()"
                     >
-                      {{ $t("miiEditor.save") }}!
+                      <Loader v-if="isSaving" />
+                      <span v-else>{{ $t("miiEditor.save") }}!</span>
                     </button>
                   </div>
                 </template>