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

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

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,
   }))
 }