From 12aa04447b0588e64c4f9d2624764dadeb0e78a2 Mon Sep 17 00:00:00 2001
From: Lhcfl <Lhcfl@outlook.com>
Date: Fri, 5 Apr 2024 11:40:58 +0800
Subject: [PATCH] feat: show a MkLoading when posting

---
 packages/client/src/components/MkPostForm.vue      | 14 ++++++++++++--
 .../client/src/components/global/MkLoading.vue     |  5 ++++-
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/client/src/components/MkPostForm.vue b/packages/client/src/components/MkPostForm.vue
index a2b1d9882c..ba58ea652a 100644
--- a/packages/client/src/components/MkPostForm.vue
+++ b/packages/client/src/components/MkPostForm.vue
@@ -85,8 +85,17 @@
 					data-cy-open-post-form-submit
 					@click="post"
 				>
-					{{ submitText
-					}}<i
+					{{ submitText }}
+					<!-- 1.3333 is the em of .ph-lg -->
+					<MkLoading
+						v-if="posting"
+						class="spinner"
+						:em="true"
+						:colored="false"
+						:size-em="1.3333"
+					/>
+					<i
+						v-else
 						:class="
 							icon(
 								reply
@@ -1399,6 +1408,7 @@ onMounted(() => {
 					opacity: 0.7;
 				}
 
+				> .spinner,
 				> i {
 					margin-left: 6px;
 				}
diff --git a/packages/client/src/components/global/MkLoading.vue b/packages/client/src/components/global/MkLoading.vue
index e5709d95ca..b8f3e84fa2 100644
--- a/packages/client/src/components/global/MkLoading.vue
+++ b/packages/client/src/components/global/MkLoading.vue
@@ -6,6 +6,7 @@
 				[$style.inline]: inline,
 				[$style.colored]: colored,
 				[$style.mini]: mini,
+				[$style.em]: em,
 			},
 		]"
 	>
@@ -36,12 +37,14 @@ const props = withDefaults(
 		colored?: boolean;
 		mini?: boolean;
 		em?: boolean;
+		sizeEm?: number;
 	}>(),
 	{
 		inline: false,
 		colored: true,
 		mini: false,
 		em: false,
+		sizeEm: 1,
 	},
 );
 </script>
@@ -98,7 +101,7 @@ const props = withDefaults(
 		display: inline-block;
 		vertical-align: middle;
 		padding: 0;
-		--size: 1em;
+		--size: v-bind(sizeEm);
 	}
 }