The Comment button is now disabled when there is no text and the AsyncButton can now be disabled without setting it to inProgress

web/src/components/Timeline.vue

@@ -203,4 +203,4 @@ a {
 }
 
 
-</style>
+</style>

web/src/components/inputs/AsyncButton.vue

@@ -1,9 +1,9 @@
 <template>
-    <button @click.stop="handleClick" :disabled="disabled">
+    <button @click.stop="handleClick" :disabled="disabled || inProgress">
         <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"
-              :class="{'d-none': !disabled}"></span>
-        <span class="ml-2" :class="{'d-none': !disabled}">In Progress...</span>
-        <span :class="{'d-none': disabled}"><slot></slot></span>
+              :class="{'d-none': !inProgress}"></span>
+        <span class="ml-2" :class="{'d-none': !inProgress}">In Progress...</span>
+        <span :class="{'d-none': inProgress}"><slot></slot></span>
     </button>
 </template>
 
@@ -13,7 +13,7 @@ export default {
     name: 'AsyncButton',
     data() {
         return {
-            disabled: false,
+            inProgress: false,
         };
     },
     props: {
@@ -21,17 +21,21 @@ export default {
             type: Function,
             required: true,
         },
+		disabled: {
+			type: Boolean,
+			required: false,
+		},
     },
     methods: {
         async handleClick() {
             if (this.task && typeof this.task === 'function') {
-                this.disabled = true;
+                this.inProgress = true;
                 try {
                     await this.task();
                 } catch (e) {
                     console.error(e);
                 } finally {
-                    this.disabled = false;
+                    this.inProgress = false;
                 }
             }
         },
@@ -43,4 +47,4 @@ export default {
 .spinner-border {
     vertical-align: -0.125em;
 }
-</style>
+</style>

web/src/views/Ticket.vue

@@ -17,7 +17,7 @@
                                         <textarea placeholder="add comment..." v-model="newComment"
                                                   class="form-control">
                                         </textarea>
-                                        <AsyncButton class="btn btn-primary float-right" :task="addCommentAndClear">
+                                        <AsyncButton class="btn btn-primary float-right" :task="addCommentAndClear" :disabled="!newComment">
                                             <font-awesome-icon icon="comment"/>
                                             Save Comment
                                         </AsyncButton>