Disable "Publish" button while post is being published

src/App.vue

@@ -136,9 +136,9 @@ button {
   }
 
   &[disabled] {
-    background-color: #ddd !important;
+    background-color: $btn-disabled-background-color !important;
     box-shadow: none;
-    color: #999 !important;
+    color: $btn-disabled-text-color !important;
     cursor: initial;
   }
 }

src/components/PostEditor.vue

@@ -67,6 +67,7 @@
           type="submit"
           v-if="inReplyTo"
           class="submit-btn-small"
+          :disabled="!canPublish()"
           @click.prevent="publish()"
         >
           Publish
@@ -78,7 +79,7 @@
       <button
         class="btn"
         type="submit"
-        :disabled="getCharacterCount() < 0"
+        :disabled="!canPublish()"
         @click.prevent="publish()"
       >Publish</button>
     </div>
@@ -130,6 +131,7 @@ let attachment = $ref<Attachment | null>(null)
 let visibility = $ref(Visibility.Public)
 
 let visibilityMenuVisible = $ref(false)
+let isLoading = $ref(false)
 let errorMessage = $ref<string | null>(null)
 
 const author = $computed<User | null>(() => {
@@ -192,6 +194,10 @@ function getCharacterCount(): number {
   return (instance.post_character_limit - content.length)
 }
 
+function canPublish(): boolean {
+  return getCharacterCount() >= 0 && !isLoading
+}
+
 async function publish() {
   const contentRendered = renderMarkdownLite(content)
   const postData = {
@@ -200,6 +206,7 @@ async function publish() {
     visibility: visibility,
     mentions: [],
   }
+  isLoading = true
   let post
   try {
     post = await createPost(
@@ -209,10 +216,12 @@ async function publish() {
     )
   } catch (error: any) {
     errorMessage = error.message
+    isLoading = false
     return
   }
   // Refresh editor
   errorMessage = null
+  isLoading = false
   attachment = null
   content = ""
   if (postFormContentRef) {
@@ -288,6 +297,11 @@ textarea {
   .submit-btn-small {
     font-weight: bold;
     margin-left: $block-inner-padding;
+
+    &[disabled] {
+      color: $btn-disabled-text-color;
+      cursor: initial;
+    }
   }
 }
 

src/styles/_theme.scss

@@ -26,6 +26,8 @@ $btn-border-radius: 8px;
 $btn-shadow: 2px 5px 10px -5px #B7B5B5;
 $btn-secondary-background-color: #CCCBC6;
 $btn-secondary-text-color: $text-color;
+$btn-disabled-background-color: #ddd;
+$btn-disabled-text-color: #999;
 
 $block-border-radius: 15px;
 $block-background-color: #fff;