From 1d128f56f963fbdd257e0b7e30cf8f06c4db37e1 Mon Sep 17 00:00:00 2001
From: nove-b <nove.b.web@gmail.com>
Date: Fri, 18 Jul 2025 18:19:28 +0900
Subject: [PATCH] fix(ui): Publish button for threaded posts allows multiple
 click (#3333)

---
 app/components/publish/PublishWidget.vue | 10 +++++-----
 app/composables/thread.ts                |  5 +++++
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/app/components/publish/PublishWidget.vue b/app/components/publish/PublishWidget.vue
index 8c25f239..5ece7fc1 100644
--- a/app/components/publish/PublishWidget.vue
+++ b/app/components/publish/PublishWidget.vue
@@ -29,7 +29,7 @@ const emit = defineEmits<{
 
 const { t } = useI18n()
 
-const { threadItems, threadIsActive, publishThread } = threadComposer ?? useThreadComposer(draftKey)
+const { threadItems, threadIsActive, publishThread, threadIsSending } = threadComposer ?? useThreadComposer(draftKey)
 
 const draft = computed({
   get: () => threadItems.value[draftItemIndex],
@@ -577,18 +577,18 @@ const detectLanguage = useDebounceFn(async () => {
               <button
                 v-if="!threadIsActive || isFinalItemOfThread"
                 btn-solid rounded-3 text-sm w-full flex="~ gap1" items-center md:w-fit class="publish-button"
-                :aria-disabled="isPublishDisabled || isExceedingCharacterLimit" aria-describedby="publish-tooltip"
-                :disabled="isPublishDisabled || isExceedingCharacterLimit"
+                :aria-disabled="isPublishDisabled || isExceedingCharacterLimit || threadIsSending" aria-describedby="publish-tooltip"
+                :disabled="isPublishDisabled || isExceedingCharacterLimit || threadIsSending"
                 @click="publish"
               >
-                <span v-if="isSending" block animate-spin preserve-3d>
+                <span v-if="isSending || threadIsSending" block animate-spin preserve-3d>
                   <div block i-ri:loader-2-fill />
                 </span>
                 <span v-if="failedMessages.length" block>
                   <div block i-carbon:face-dizzy-filled />
                 </span>
                 <template v-if="threadIsActive">
-                  <span>{{ $t('action.publish_thread') }} </span>
+                  <span>{{ !threadIsSending ? $t('action.publish_thread') : $t('state.publishing') }} </span>
                 </template>
                 <template v-else>
                   <span v-if="draft.editingStatus">{{ $t('action.save_changes') }}</span>
diff --git a/app/composables/thread.ts b/app/composables/thread.ts
index 10ce4c3d..b31a3c5c 100644
--- a/app/composables/thread.ts
+++ b/app/composables/thread.ts
@@ -11,6 +11,8 @@ export function useThreadComposer(draftKey: string, initial?: () => DraftItem) {
    */
   const threadIsActive = computed<boolean>(() => draftItems.value.length > 1)
 
+  const threadIsSending = ref(false)
+
   /**
    * Add an item to the thread
    */
@@ -44,6 +46,7 @@ export function useThreadComposer(draftKey: string, initial?: () => DraftItem) {
   async function publishThread() {
     const allFailedMessages: Array<string> = []
     const isAReplyThread = Boolean(draftItems.value[0].params.inReplyToId)
+    threadIsSending.value = true
 
     let lastPublishedStatus: mastodon.v1.Status | null = null
     let amountPublished = 0
@@ -72,6 +75,7 @@ export function useThreadComposer(draftKey: string, initial?: () => DraftItem) {
     }
     // Remove all published items from the thread
     draftItems.value.splice(0, amountPublished)
+    threadIsSending.value = false
 
     // If we have errors, return them
     if (allFailedMessages.length > 0)
@@ -90,5 +94,6 @@ export function useThreadComposer(draftKey: string, initial?: () => DraftItem) {
     addThreadItem,
     removeThreadItem,
     publishThread,
+    threadIsSending,
   }
 }