feat: add loading state for import actions (#4217)

Co-authored-by: jamesgeorge007 <25279263+jamesgeorge007@users.noreply.github.com>

packages/hoppscotch-common/src/components/collections/ImportExport.vue

@@ -19,30 +19,30 @@ import { UrlSource } from "~/helpers/import-export/import/import-sources/UrlSour
 import IconFile from "~icons/lucide/file"
 
 import {
-  hoppRESTImporter,
-  hoppInsomniaImporter,
-  hoppPostmanImporter,
-  toTeamsImporter,
-  hoppOpenAPIImporter,
   harImporter,
+  hoppInsomniaImporter,
+  hoppOpenAPIImporter,
+  hoppPostmanImporter,
+  hoppRESTImporter,
+  toTeamsImporter,
 } from "~/helpers/import-export/import/importers"
 
 import { defineStep } from "~/composables/step-components"
 
+import MyCollectionImport from "~/components/importExport/ImportExportSteps/MyCollectionImport.vue"
 import { useI18n } from "~/composables/i18n"
 import { useToast } from "~/composables/toast"
 import { appendRESTCollections, restCollections$ } from "~/newstore/collections"
-import MyCollectionImport from "~/components/importExport/ImportExportSteps/MyCollectionImport.vue"
 
-import IconFolderPlus from "~icons/lucide/folder-plus"
-import IconOpenAPI from "~icons/lucide/file"
-import IconPostman from "~icons/hopp/postman"
 import IconInsomnia from "~icons/hopp/insomnia"
+import IconPostman from "~icons/hopp/postman"
+import IconOpenAPI from "~icons/lucide/file"
+import IconFolderPlus from "~icons/lucide/folder-plus"
 import IconGithub from "~icons/lucide/github"
 import IconLink from "~icons/lucide/link"
 
-import IconUser from "~icons/lucide/user"
 import { useReadonlyStream } from "~/composables/stream"
+import IconUser from "~icons/lucide/user"
 
 import { getTeamCollectionJSON } from "~/helpers/backend/helpers"
 
@@ -53,10 +53,18 @@ import { gistExporter } from "~/helpers/import-export/export/gist"
 import { myCollectionsExporter } from "~/helpers/import-export/export/myCollections"
 import { teamCollectionsExporter } from "~/helpers/import-export/export/teamCollections"
 
-import { GistSource } from "~/helpers/import-export/import/import-sources/GistSource"
 import { ImporterOrExporter } from "~/components/importExport/types"
+import { GistSource } from "~/helpers/import-export/import/import-sources/GistSource"
 import { TeamWorkspace } from "~/services/workspace.service"
 
+const isPostmanImporterInProgress = ref(false)
+const isInsomniaImporterInProgress = ref(false)
+const isOpenAPIImporterInProgress = ref(false)
+const isRESTImporterInProgress = ref(false)
+const isPersonalCollectionImporterInProgress = ref(false)
+const isHarImporterInProgress = ref(false)
+const isGistImporterInProgress = ref(false)
+
 const t = useI18n()
 const toast = useToast()
 
@@ -92,7 +100,7 @@ const showImportFailedError = () => {
 const handleImportToStore = async (collections: HoppCollection[]) => {
   const importResult =
     props.collectionsType.type === "my-collections"
-      ? await importToPersonalWorkspace(collections)
+      ? importToPersonalWorkspace(collections)
       : await importToTeamsWorkspace(collections)
 
   if (E.isRight(importResult)) {
@@ -179,10 +187,11 @@ const HoppRESTImporter: ImporterOrExporter = {
     caption: "import.from_file",
     acceptedFileTypes: ".json",
     onImportFromFile: async (content) => {
+      isRESTImporterInProgress.value = true
       const res = await hoppRESTImporter(content)()
 
       if (E.isRight(res)) {
-        handleImportToStore(res.right)
+        await handleImportToStore(res.right)
 
         platform.analytics?.logEvent({
           type: "HOPP_IMPORT_COLLECTION",
@@ -193,7 +202,10 @@ const HoppRESTImporter: ImporterOrExporter = {
       } else {
         showImportFailedError()
       }
+
+      isRESTImporterInProgress.value = false
     },
+    isLoading: isRESTImporterInProgress,
   }),
 }
 
@@ -207,8 +219,11 @@ const HoppMyCollectionImporter: ImporterOrExporter = {
     applicableTo: ["team-workspace"],
   },
   component: defineStep("my_collection_import", MyCollectionImport, () => ({
+    loading: isPersonalCollectionImporterInProgress.value,
     async onImportFromMyCollection(content) {
-      handleImportToStore([content])
+      isPersonalCollectionImporterInProgress.value = true
+
+      await handleImportToStore([content])
 
       // our analytics consider this as an export event, so keeping compatibility with that
       platform.analytics?.logEvent({
@@ -216,6 +231,8 @@ const HoppMyCollectionImporter: ImporterOrExporter = {
         exporter: "import_to_teams",
         platform: "rest",
       })
+
+      isPersonalCollectionImporterInProgress.value = false
     },
   })),
 }
@@ -238,10 +255,12 @@ const HoppOpenAPIImporter: ImporterOrExporter = {
         caption: "import.from_file",
         acceptedFileTypes: ".json, .yaml, .yml",
         onImportFromFile: async (content) => {
+          isOpenAPIImporterInProgress.value = true
+
           const res = await hoppOpenAPIImporter(content)()
 
           if (E.isRight(res)) {
-            handleImportToStore(res.right)
+            await handleImportToStore(res.right)
 
             platform.analytics?.logEvent({
               platform: "rest",
@@ -252,7 +271,10 @@ const HoppOpenAPIImporter: ImporterOrExporter = {
           } else {
             showImportFailedError()
           }
+
+          isOpenAPIImporterInProgress.value = false
         },
+        isLoading: isOpenAPIImporterInProgress,
       }),
     },
     {
@@ -262,10 +284,12 @@ const HoppOpenAPIImporter: ImporterOrExporter = {
       step: UrlSource({
         caption: "import.from_url",
         onImportFromURL: async (content) => {
+          isOpenAPIImporterInProgress.value = true
+
           const res = await hoppOpenAPIImporter([content])()
 
           if (E.isRight(res)) {
-            handleImportToStore(res.right)
+            await handleImportToStore(res.right)
 
             platform.analytics?.logEvent({
               platform: "rest",
@@ -276,7 +300,10 @@ const HoppOpenAPIImporter: ImporterOrExporter = {
           } else {
             showImportFailedError()
           }
+
+          isOpenAPIImporterInProgress.value = false
         },
+        isLoading: isOpenAPIImporterInProgress,
       }),
     },
   ],
@@ -295,10 +322,12 @@ const HoppPostmanImporter: ImporterOrExporter = {
     caption: "import.from_file",
     acceptedFileTypes: ".json",
     onImportFromFile: async (content) => {
+      isPostmanImporterInProgress.value = true
+
       const res = await hoppPostmanImporter(content)()
 
       if (E.isRight(res)) {
-        handleImportToStore(res.right)
+        await handleImportToStore(res.right)
 
         platform.analytics?.logEvent({
           platform: "rest",
@@ -309,7 +338,10 @@ const HoppPostmanImporter: ImporterOrExporter = {
       } else {
         showImportFailedError()
       }
+
+      isPostmanImporterInProgress.value = false
     },
+    isLoading: isPostmanImporterInProgress,
   }),
 }
 
@@ -326,10 +358,12 @@ const HoppInsomniaImporter: ImporterOrExporter = {
     caption: "import.from_file",
     acceptedFileTypes: ".json",
     onImportFromFile: async (content) => {
+      isInsomniaImporterInProgress.value = true
+
       const res = await hoppInsomniaImporter(content)()
 
       if (E.isRight(res)) {
-        handleImportToStore(res.right)
+        await handleImportToStore(res.right)
 
         platform.analytics?.logEvent({
           platform: "rest",
@@ -340,7 +374,10 @@ const HoppInsomniaImporter: ImporterOrExporter = {
       } else {
         showImportFailedError()
       }
+
+      isInsomniaImporterInProgress.value = false
     },
+    isLoading: isInsomniaImporterInProgress,
   }),
 }
 
@@ -361,10 +398,12 @@ const HoppGistImporter: ImporterOrExporter = {
         return
       }
 
+      isGistImporterInProgress.value = true
+
       const res = await hoppRESTImporter(content.right)()
 
       if (E.isRight(res)) {
-        handleImportToStore(res.right)
+        await handleImportToStore(res.right)
 
         platform.analytics?.logEvent({
           platform: "rest",
@@ -375,7 +414,10 @@ const HoppGistImporter: ImporterOrExporter = {
       } else {
         showImportFailedError()
       }
+
+      isGistImporterInProgress.value = false
     },
+    isLoading: isGistImporterInProgress,
   }),
 }
 
@@ -528,22 +570,26 @@ const HARImporter: ImporterOrExporter = {
     caption: "import.from_file",
     acceptedFileTypes: ".har",
     onImportFromFile: async (content) => {
+      isHarImporterInProgress.value = true
+
       const res = await harImporter(content)
 
-      if (E.isLeft(res)) {
+      if (E.isRight(res)) {
+        await handleImportToStore(res.right)
+
+        platform.analytics?.logEvent({
+          type: "HOPP_IMPORT_COLLECTION",
+          importer: "import.from_har",
+          platform: "rest",
+          workspaceType: isTeamWorkspace.value ? "team" : "personal",
+        })
+      } else {
         showImportFailedError()
-        return
       }
 
-      handleImportToStore(res.right)
-
-      platform.analytics?.logEvent({
-        type: "HOPP_IMPORT_COLLECTION",
-        importer: "import.from_har",
-        platform: "rest",
-        workspaceType: isTeamWorkspace.value ? "team" : "personal",
-      })
+      isHarImporterInProgress.value = false
     },
+    isLoading: isHarImporterInProgress,
   }),
 }