fix(ui): Publish button for threaded posts allows multiple click (#3333)

This commit is contained in:
nove-b 2025-07-18 18:19:28 +09:00 committed by GitHub
parent 190be77043
commit 1d128f56f9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 10 additions and 5 deletions

View file

@ -29,7 +29,7 @@ const emit = defineEmits<{
const { t } = useI18n() const { t } = useI18n()
const { threadItems, threadIsActive, publishThread } = threadComposer ?? useThreadComposer(draftKey) const { threadItems, threadIsActive, publishThread, threadIsSending } = threadComposer ?? useThreadComposer(draftKey)
const draft = computed({ const draft = computed({
get: () => threadItems.value[draftItemIndex], get: () => threadItems.value[draftItemIndex],
@ -577,18 +577,18 @@ const detectLanguage = useDebounceFn(async () => {
<button <button
v-if="!threadIsActive || isFinalItemOfThread" v-if="!threadIsActive || isFinalItemOfThread"
btn-solid rounded-3 text-sm w-full flex="~ gap1" items-center md:w-fit class="publish-button" 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" :aria-disabled="isPublishDisabled || isExceedingCharacterLimit || threadIsSending" aria-describedby="publish-tooltip"
:disabled="isPublishDisabled || isExceedingCharacterLimit" :disabled="isPublishDisabled || isExceedingCharacterLimit || threadIsSending"
@click="publish" @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 /> <div block i-ri:loader-2-fill />
</span> </span>
<span v-if="failedMessages.length" block> <span v-if="failedMessages.length" block>
<div block i-carbon:face-dizzy-filled /> <div block i-carbon:face-dizzy-filled />
</span> </span>
<template v-if="threadIsActive"> <template v-if="threadIsActive">
<span>{{ $t('action.publish_thread') }} </span> <span>{{ !threadIsSending ? $t('action.publish_thread') : $t('state.publishing') }} </span>
</template> </template>
<template v-else> <template v-else>
<span v-if="draft.editingStatus">{{ $t('action.save_changes') }}</span> <span v-if="draft.editingStatus">{{ $t('action.save_changes') }}</span>

View file

@ -11,6 +11,8 @@ export function useThreadComposer(draftKey: string, initial?: () => DraftItem) {
*/ */
const threadIsActive = computed<boolean>(() => draftItems.value.length > 1) const threadIsActive = computed<boolean>(() => draftItems.value.length > 1)
const threadIsSending = ref(false)
/** /**
* Add an item to the thread * Add an item to the thread
*/ */
@ -44,6 +46,7 @@ export function useThreadComposer(draftKey: string, initial?: () => DraftItem) {
async function publishThread() { async function publishThread() {
const allFailedMessages: Array<string> = [] const allFailedMessages: Array<string> = []
const isAReplyThread = Boolean(draftItems.value[0].params.inReplyToId) const isAReplyThread = Boolean(draftItems.value[0].params.inReplyToId)
threadIsSending.value = true
let lastPublishedStatus: mastodon.v1.Status | null = null let lastPublishedStatus: mastodon.v1.Status | null = null
let amountPublished = 0 let amountPublished = 0
@ -72,6 +75,7 @@ export function useThreadComposer(draftKey: string, initial?: () => DraftItem) {
} }
// Remove all published items from the thread // Remove all published items from the thread
draftItems.value.splice(0, amountPublished) draftItems.value.splice(0, amountPublished)
threadIsSending.value = false
// If we have errors, return them // If we have errors, return them
if (allFailedMessages.length > 0) if (allFailedMessages.length > 0)
@ -90,5 +94,6 @@ export function useThreadComposer(draftKey: string, initial?: () => DraftItem) {
addThreadItem, addThreadItem,
removeThreadItem, removeThreadItem,
publishThread, publishThread,
threadIsSending,
} }
} }