add loading state on share button (#309)

facade · Sep 6, 2020 · e2b6a9e · e2b6a9e
1 parent 64cb88a
commit e2b6a9e
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 7 deletions.
diff --git a/resources/compiled/ignition.js b/resources/compiled/ignition.js
diff --git a/resources/js/components/Shared/ShareButton.vue b/resources/js/components/Shared/ShareButton.vue
@@ -46,7 +46,12 @@
                     :ownerUrl="sharedErrorUrls.owner_url"
                 />
             </div>
-            <ShareForm v-else @share="shareError" :error="shareHadError" />
+            <ShareForm
+                v-else
+                :error="shareHadError"
+                :is-loading="isShareLoading"
+                @share="shareError"
+            />
         </div>
     </div>
 </template>
@@ -64,6 +69,7 @@ export default {
             shareHadError: false,
             sharedErrorUrls: null,
             menuVisible: false,
+            isShareLoading: false,
         };
     },
 
@@ -83,6 +89,8 @@ export default {
         },
 
         async shareError(selectedTabs) {
+            this.isShareLoading = true;
+
             try {
                 const response = await fetch(this.shareEndpoint, {
                     method: 'POST',
@@ -106,6 +114,8 @@ export default {
             } catch (error) {
                 this.shareHadError = true;
             }
+
+            this.isShareLoading = false;
         },
     },
 };

diff --git a/resources/js/components/Shared/ShareForm.vue b/resources/js/components/Shared/ShareForm.vue
@@ -18,8 +18,12 @@
                 Please try again later.
             </div>
 
-            <button @click="shareError" class="button-secondary button-sm bg-tint-600 text-white">
-                Share
+            <button
+                class="button-secondary button-sm text-white bg-tint-600"
+                :disabled="isLoading"
+                @click="shareError"
+            >
+                {{ isLoading ? 'Sharing…' : 'Share' }}
             </button>
         </div>
     </div>
@@ -31,7 +35,7 @@ import CheckboxField from './CheckboxField';
 export default {
     components: { CheckboxField },
 
-    props: ['error'],
+    props: ['error', 'isLoading'],
 
     computed: {
         selectedTabs() {
@@ -54,7 +58,9 @@ export default {
 
     methods: {
         shareError() {
-            this.$emit('share', this.selectedTabs);
+            if (!this.isLoading) {
+                this.$emit('share', this.selectedTabs);
+            }
         },
     },
 };