• All the relevant importer types (HoppPostmanImporter, HoppInsomniaImporter and HoppOpenAPImporter) need to be updated similar to the updates proposed to HoppRESTImporter:

  • Remove the try/finally block.
  • Wait for the promise from handleImportToStore() to resolve.
  • Add a new metadata entry isLoading.

• Since we're adding a new isLoading metadata field for the FileSource helper function, we'll have to make the following changes to its source.

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()
 
export function FileSource(metadata: {
     acceptedFileTypes: metadata.acceptedFileTypes,
     caption: metadata.caption,
     onImportFromFile: metadata.onImportFromFile,
+    loading: metadata.isLoading?.value,
   }))
 }

• A new prop loading has to be added for the FileImport component and the import CTA that is rendered via HoppButtonPrimary needs to be supplied a loading prop attaching to the newly added prop. Also, the disable logic should be updated to account for the loading state.

• We'll also need to account for Import from Personal collections represented by the HoppMyCollectionImporter importer. A new reactive state variable has to be added to track the loading state. The MyCollectionImport component will require updates similar to the FileSource component.

We can add loading state for gist and har importer as well

LGTM 💯