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)
+      isHarImporterInProgress.value = false
-
-      platform.analytics?.logEvent({
-        type: "HOPP_IMPORT_COLLECTION",
-        importer: "import.from_har",
-        platform: "rest",
-        workspaceType: isTeamWorkspace.value ? "team" : "personal",
-      })
     },
+    isLoading: isHarImporterInProgress,
   }),
 }
 

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

@@ -231,7 +231,7 @@ const showImportFailedError = () => {
   toast.error(t("import.failed"))
 }
 
-const handleImportToStore = async (gqlCollections: HoppCollection[]) => {
+const handleImportToStore = (gqlCollections: HoppCollection[]) => {
   appendGraphqlCollections(gqlCollections)
   toast.success(t("state.file_imported"))
 }

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

@@ -60,6 +60,11 @@ const currentUser = useReadonlyStream(
   platform.auth.getCurrentUser()
 )
 
+const isPostmanImporterInProgress = ref(false)
+const isInsomniaImporterInProgress = ref(false)
+const isRESTImporterInProgress = ref(false)
+const isGistImporterInProgress = ref(false)
+
 const isEnvironmentGistExportInProgress = ref(false)
 
 const isTeamEnvironment = computed(() => {
@@ -91,23 +96,27 @@ const HoppEnvironmentsImport: ImporterOrExporter = {
     acceptedFileTypes: "application/json",
     caption: "import.hoppscotch_environment_description",
     onImportFromFile: async (environments) => {
+      isRESTImporterInProgress.value = true
+
       const res = await hoppEnvImporter(environments)()
 
-      if (E.isLeft(res)) {
+      if (E.isRight(res)) {
+        await handleImportToStore(res.right)
+
+        platform.analytics?.logEvent({
+          type: "HOPP_IMPORT_ENVIRONMENT",
+          platform: "rest",
+          workspaceType: isTeamEnvironment.value ? "team" : "personal",
+        })
+
+        emit("hide-modal")
+      } else {
         showImportFailedError()
-        return
       }
 
-      handleImportToStore(res.right)
+      isRESTImporterInProgress.value = false
-
-      platform.analytics?.logEvent({
-        type: "HOPP_IMPORT_ENVIRONMENT",
-        platform: "rest",
-        workspaceType: workspaceType.value,
-      })
-
-      emit("hide-modal")
     },
+    isLoading: isRESTImporterInProgress,
   }),
 }
 
@@ -124,23 +133,27 @@ const PostmanEnvironmentsImport: ImporterOrExporter = {
     acceptedFileTypes: "application/json",
     caption: "import.postman_environment_description",
     onImportFromFile: async (environments) => {
+      isPostmanImporterInProgress.value = true
+
       const res = await postmanEnvImporter(environments)()
 
-      if (E.isLeft(res)) {
+      if (E.isRight(res)) {
+        await handleImportToStore(res.right)
+
+        platform.analytics?.logEvent({
+          type: "HOPP_IMPORT_ENVIRONMENT",
+          platform: "rest",
+          workspaceType: isTeamEnvironment.value ? "team" : "personal",
+        })
+
+        emit("hide-modal")
+      } else {
         showImportFailedError()
-        return
       }
 
-      handleImportToStore(res.right)
+      isPostmanImporterInProgress.value = false
-
-      platform.analytics?.logEvent({
-        type: "HOPP_IMPORT_ENVIRONMENT",
-        platform: "rest",
-        workspaceType: workspaceType.value,
-      })
-
-      emit("hide-modal")
     },
+    isLoading: isPostmanImporterInProgress,
   }),
 }
 
@@ -157,30 +170,34 @@ const insomniaEnvironmentsImport: ImporterOrExporter = {
     acceptedFileTypes: "application/json",
     caption: "import.insomnia_environment_description",
     onImportFromFile: async (environments) => {
+      isInsomniaImporterInProgress.value = true
+
       const res = await insomniaEnvImporter(environments)()
 
-      if (E.isLeft(res)) {
+      if (E.isRight(res)) {
+        const globalEnvs = res.right.filter(
+          (env) => env.name === "Base Environment"
+        )
+        const otherEnvs = res.right.filter(
+          (env) => env.name !== "Base Environment"
+        )
+
+        await handleImportToStore(otherEnvs, globalEnvs)
+
+        platform.analytics?.logEvent({
+          type: "HOPP_IMPORT_ENVIRONMENT",
+          platform: "rest",
+          workspaceType: isTeamEnvironment.value ? "team" : "personal",
+        })
+
+        emit("hide-modal")
+      } else {
         showImportFailedError()
-        return
       }
 
-      const globalEnvs = res.right.filter(
+      isInsomniaImporterInProgress.value = false
-        (env) => env.name === "Base Environment"
-      )
-      const otherEnvs = res.right.filter(
-        (env) => env.name !== "Base Environment"
-      )
-
-      handleImportToStore(otherEnvs, globalEnvs)
-
-      platform.analytics?.logEvent({
-        type: "HOPP_IMPORT_ENVIRONMENT",
-        platform: "rest",
-        workspaceType: workspaceType.value,
-      })
-
-      emit("hide-modal")
     },
+    isLoading: isInsomniaImporterInProgress,
   }),
 }
 
@@ -201,21 +218,26 @@ const EnvironmentsImportFromGIST: ImporterOrExporter = {
         return
       }
 
+      isGistImporterInProgress.value = true
+
       const res = await hoppEnvImporter(environments.right)()
 
-      if (E.isLeft(res)) {
+      if (E.isRight(res)) {
+        await handleImportToStore(res.right)
+
+        platform.analytics?.logEvent({
+          type: "HOPP_IMPORT_ENVIRONMENT",
+          platform: "rest",
+          workspaceType: isTeamEnvironment.value ? "team" : "personal",
+        })
+        emit("hide-modal")
+      } else {
         showImportFailedError()
-        return
       }
 
-      handleImportToStore(res.right)
+      isGistImporterInProgress.value = false
-      platform.analytics?.logEvent({
-        type: "HOPP_IMPORT_ENVIRONMENT",
-        platform: "rest",
-        workspaceType: workspaceType.value,
-      })
-      emit("hide-modal")
     },
+    isLoading: isGistImporterInProgress,
   }),
 }
 

packages/hoppscotch-common/src/components/importExport/ImportExportSteps/FileImport.vue

@@ -45,9 +45,10 @@
     </p>
     <div>
       <HoppButtonPrimary
-        class="w-full"
+        :disabled="disableImportCTA"
         :label="t('import.title')"
-        :disabled="!hasFile || showFileSizeLimitExceededWarning"
+        :loading="loading"
+        class="w-full"
         @click="emit('importFromFile', fileContent)"
       />
     </div>
@@ -55,14 +56,20 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue"
 import { useI18n } from "@composables/i18n"
 import { useToast } from "@composables/toast"
+import { computed, ref } from "vue"
 
-defineProps<{
+const props = withDefaults(
-  caption: string
+  defineProps<{
-  acceptedFileTypes: string
+    caption: string
-}>()
+    acceptedFileTypes: string
+    loading?: boolean
+  }>(),
+  {
+    loading: false,
+  }
+)
 
 const t = useI18n()
 const toast = useToast()
@@ -81,6 +88,12 @@ const emit = defineEmits<{
   (e: "importFromFile", content: string[]): void
 }>()
 
+// Disable the import CTA if no file is selected, the file size limit is exceeded, or during an import action indicated by the `isLoading` prop
+const disableImportCTA = computed(
+  () =>
+    !hasFile.value || showFileSizeLimitExceededWarning.value || props.loading
+)
+
 const onFileChange = async () => {
   // Reset the state on entering the handler to avoid any stale state
   if (showFileSizeLimitExceededWarning.value) {

packages/hoppscotch-common/src/components/importExport/ImportExportSteps/MyCollectionImport.vue

@@ -24,7 +24,8 @@
     <HoppButtonPrimary
       class="w-full"
       :label="t('import.title')"
-      :disabled="!hasSelectedCollectionID"
+      :loading="loading"
+      :disabled="!hasSelectedCollectionID || loading"
       @click="fetchCollectionFromMyCollections"
     />
   </div>
@@ -39,6 +40,10 @@ import { getRESTCollection, restCollections$ } from "~/newstore/collections"
 
 const t = useI18n()
 
+defineProps<{
+  loading: boolean
+}>()
+
 const mySelectedCollectionID = ref<number | undefined>(undefined)
 
 const hasSelectedCollectionID = computed(() => {

packages/hoppscotch-common/src/components/importExport/ImportExportSteps/UrlImport.vue

@@ -26,8 +26,8 @@
       <HoppButtonPrimary
         class="w-full"
         :label="t('import.title')"
-        :disabled="!hasURL"
+        :disabled="disableImportCTA"
-        :loading="isFetchingUrl"
+        :loading="isFetchingUrl || loading"
         @click="fetchUrlData"
       />
     </div>
@@ -35,7 +35,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from "vue"
+import { computed, ref, watch } from "vue"
 import { useI18n } from "@composables/i18n"
 import { useToast } from "~/composables/toast"
 import axios, { AxiosResponse } from "axios"
@@ -44,10 +44,14 @@ const t = useI18n()
 
 const toast = useToast()
 
-const props = defineProps<{
+const props = withDefaults(
-  caption: string
+  defineProps<{
-  fetchLogic?: (url: string) => Promise<AxiosResponse<any>>
+    caption: string
-}>()
+    fetchLogic?: (url: string) => Promise<AxiosResponse<any>>
+    loading?: boolean
+  }>(),
+  { fetchLogic: undefined, loading: false }
+)
 
 const emit = defineEmits<{
   (e: "importFromURL", content: unknown): void
@@ -62,6 +66,8 @@ watch(inputChooseGistToImportFrom, (url) => {
   hasURL.value = !!url
 })
 
+const disableImportCTA = computed(() => !hasURL.value || props.loading)
+
 const urlFetchLogic =
   props.fetchLogic ??
   async function (url: string) {

packages/hoppscotch-common/src/helpers/import-export/import/import-sources/FileSource.ts

@@ -2,11 +2,13 @@ import FileImportVue from "~/components/importExport/ImportExportSteps/FileImpor
 import { defineStep } from "~/composables/step-components"
 
 import { v4 as uuidv4 } from "uuid"
+import { Ref } from "vue"
 
 export function FileSource(metadata: {
   acceptedFileTypes: string
   caption: string
   onImportFromFile: (content: string[]) => any | Promise<any>
+  isLoading?: Ref<boolean>
 }) {
   const stepID = uuidv4()
 
@@ -14,5 +16,6 @@ export function FileSource(metadata: {
     acceptedFileTypes: metadata.acceptedFileTypes,
     caption: metadata.caption,
     onImportFromFile: metadata.onImportFromFile,
+    loading: metadata.isLoading?.value,
   }))
 }

packages/hoppscotch-common/src/helpers/import-export/import/import-sources/GistSource.ts

@@ -6,18 +6,20 @@ import * as E from "fp-ts/Either"
 import { z } from "zod"
 
 import { v4 as uuidv4 } from "uuid"
+import { Ref } from "vue"
 
 export function GistSource(metadata: {
   caption: string
   onImportFromGist: (
     importResult: E.Either<string, string[]>
   ) => any | Promise<any>
+  isLoading?: Ref<boolean>
 }) {
   const stepID = uuidv4()
 
   return defineStep(stepID, UrlImport, () => ({
     caption: metadata.caption,
-    onImportFromURL: (gistResponse: Record<string, unknown>) => {
+    onImportFromURL: (gistResponse: unknown) => {
       const fileSchema = z.object({
         files: z.record(z.object({ content: z.string() })),
       })
@@ -36,6 +38,7 @@ export function GistSource(metadata: {
       metadata.onImportFromGist(E.right(contents))
     },
     fetchLogic: fetchGistFromUrl,
+    loading: metadata.isLoading?.value,
   }))
 }
 

packages/hoppscotch-common/src/helpers/import-export/import/import-sources/UrlSource.ts

@@ -2,11 +2,13 @@ import UrlImport from "~/components/importExport/ImportExportSteps/UrlImport.vue
 import { defineStep } from "~/composables/step-components"
 
 import { v4 as uuidv4 } from "uuid"
+import { Ref } from "vue"
 
 export function UrlSource(metadata: {
   caption: string
   onImportFromURL: (content: string) => any | Promise<any>
   fetchLogic?: (url: string) => Promise<any>
+  isLoading?: Ref<boolean>
 }) {
   const stepID = uuidv4()
 
@@ -17,5 +19,6 @@ export function UrlSource(metadata: {
         metadata.onImportFromURL(content)
       }
     },
+    loading: metadata.isLoading?.value,
   }))
 }