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); } }