feat: loading state on export actions

packages/hoppscotch-app/components/collections/my/Collection.vue

@@ -81,6 +81,7 @@
               @keyup.n="folderAction.$el.click()"
               @keyup.e="edit.$el.click()"
               @keyup.delete="deleteAction.$el.click()"
+              @keyup.x="exportAction.$el.click()"
               @keyup.escape="options.tippy().hide()"
             >
               <SmartItem
@@ -122,6 +123,18 @@
                   }
                 "
               />
+              <SmartItem
+                ref="exportAction"
+                svg="download"
+                :label="$t('export.as_json')"
+                :shortcut="['X']"
+                @click.native="
+                  () => {
+                    $emit('export-collection')
+                    options.tippy().hide()
+                  }
+                "
+              />
             </div>
           </tippy>
         </span>
@@ -222,6 +235,7 @@ export default defineComponent({
       folderAction: ref<any | null>(null),
       edit: ref<any | null>(null),
       deleteAction: ref<any | null>(null),
+      exportAction: ref<any | null>(null),
     }
   },
   data() {

packages/hoppscotch-app/components/collections/my/Folder.vue

@@ -59,6 +59,7 @@
               @keyup.n="folderAction.$el.click()"
               @keyup.e="edit.$el.click()"
               @keyup.delete="deleteAction.$el.click()"
+              @keyup.x="exportAction.$el.click()"
               @keyup.escape="options.tippy().hide()"
             >
               <SmartItem
@@ -102,6 +103,18 @@
                   }
                 "
               />
+              <SmartItem
+                ref="exportAction"
+                svg="download"
+                :label="$t('export.as_json')"
+                :shortcut="['X']"
+                @click.native="
+                  () => {
+                    $emit('export-collection')
+                    options.tippy().hide()
+                  }
+                "
+              />
             </div>
           </tippy>
         </span>
@@ -211,6 +224,7 @@ export default defineComponent({
       folderAction: ref<any | null>(null),
       edit: ref<any | null>(null),
       deleteAction: ref<any | null>(null),
+      exportAction: ref<any | null>(null),
       t,
     }
   },

packages/hoppscotch-app/components/collections/teams/Collection.vue

@@ -82,6 +82,7 @@
               @keyup.n="folderAction.$el.click()"
               @keyup.e="edit.$el.click()"
               @keyup.delete="deleteAction.$el.click()"
+              @keyup.x="exportAction.$el.click()"
               @keyup.escape="options.tippy().hide()"
             >
               <SmartItem
@@ -123,6 +124,22 @@
                   }
                 "
               />
+              <SmartItem
+                ref="exportAction"
+                svg="download"
+                :label="$t('export.as_json')"
+                :shortcut="['X']"
+                :loading="exportLoading"
+                @click.native="
+                  () => {
+                    $emit('export-collection')
+                    // TODO: remove the below line
+                    exportLoading = true
+                    // TODO: remove the below line, instead hide the tooltip after finishing export
+                    options.tippy().hide()
+                  }
+                "
+              />
             </div>
           </tippy>
         </span>
@@ -237,6 +254,8 @@ export default defineComponent({
       folderAction: ref<any | null>(null),
       edit: ref<any | null>(null),
       deleteAction: ref<any | null>(null),
+      exportAction: ref<any | null>(null),
+      exportLoading: ref<boolean>(false),
       t,
     }
   },

packages/hoppscotch-app/components/collections/teams/Folder.vue

@@ -61,6 +61,7 @@
               @keyup.n="folderAction.$el.click()"
               @keyup.e="edit.$el.click()"
               @keyup.delete="deleteAction.$el.click()"
+              @keyup.x="exportAction.$el.click()"
               @keyup.escape="options.tippy().hide()"
             >
               <SmartItem
@@ -104,6 +105,22 @@
                   }
                 "
               />
+              <SmartItem
+                ref="exportAction"
+                svg="download"
+                :label="$t('export.as_json')"
+                :shortcut="['X']"
+                :loading="exportLoading"
+                @click.native="
+                  () => {
+                    $emit('export-collection')
+                    // TODO: remove the below line
+                    exportLoading = true
+                    // TODO: remove the below line, instead hide the tooltip after finishing export
+                    options.tippy().hide()
+                  }
+                "
+              />
             </div>
           </tippy>
         </span>
@@ -217,6 +234,8 @@ export default defineComponent({
       folderAction: ref<any | null>(null),
       edit: ref<any | null>(null),
       deleteAction: ref<any | null>(null),
+      exportAction: ref<any | null>(null),
+      exportLoading: ref<boolean>(false),
     }
   },
   data() {