[PR #4217] [MERGED] feat: add loading state for import actions #4710

New issue

Closed

opened 2026-03-17 02:13:13 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 02:13:13 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/4217
Author: @HelixY2J
Created: 7/28/2024
Status: ✅ Merged
Merged: 9/23/2024
Merged by: @AndrewBastin

Base: next ← Head: adding-loading-state

📝 Commits (5)

e0aa806 Added loading state for importing collection modals
fb53124 chore: show loading spinner and disable the import CTA
beb1dd9 feat: add loading state for import environment actions
cfecc22 chore: cleanup
45886a0 feat: extend loading state to all importer types

📊 Changes

9 files changed (+194 additions, -93 deletions)

View changed files

📝 packages/hoppscotch-common/src/components/collections/ImportExport.vue (+73 -27)
📝 packages/hoppscotch-common/src/components/collections/graphql/ImportExport.vue (+1 -1)
📝 packages/hoppscotch-common/src/components/environments/ImportExport.vue (+70 -48)
📝 packages/hoppscotch-common/src/components/importExport/ImportExportSteps/FileImport.vue (+21 -8)
📝 packages/hoppscotch-common/src/components/importExport/ImportExportSteps/MyCollectionImport.vue (+6 -1)
📝 packages/hoppscotch-common/src/components/importExport/ImportExportSteps/UrlImport.vue (+13 -7)
📝 packages/hoppscotch-common/src/helpers/import-export/import/import-sources/FileSource.ts (+3 -0)
📝 packages/hoppscotch-common/src/helpers/import-export/import/import-sources/GistSource.ts (+4 -1)
📝 packages/hoppscotch-common/src/helpers/import-export/import/import-sources/UrlSource.ts (+3 -0)

📄 Description

This PR addresses the need for a loading state in the Import/Export modals that includes collections and environments in scope.

Closes #4145 HFE-594.

What's changed

Introduce state variables to keep track of the loading status during a network call while importing to the data store applicable to the team workspace. The handleImportToStore function promise resolution is awaited.
Introduce a loading prop to the FileImport & UrlImport components that default to false - toggles the Import CTA loading state accordingly. The import CTA stays disabled during a loading state.
Adds a loading prop to the MyCollectionImport component to handle the loading state with import from personal collections flow while at a team workspace.
The FileSource() & UrlSource() functions now include a new isLoading parameter via which the above state variables are supplied from the respective component.

Note to reviewers

Please verify the import collections/environments flow e2e.

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/hoppscotch/hoppscotch/pull/4217 **Author:** [@HelixY2J](https://github.com/HelixY2J) **Created:** 7/28/2024 **Status:** ✅ Merged **Merged:** 9/23/2024 **Merged by:** [@AndrewBastin](https://github.com/AndrewBastin) **Base:** `next` ← **Head:** `adding-loading-state` --- ### 📝 Commits (5) - [`e0aa806`](https://github.com/hoppscotch/hoppscotch/commit/e0aa80626253936744d844aa79a312ef9acbedb6) Added loading state for importing collection modals - [`fb53124`](https://github.com/hoppscotch/hoppscotch/commit/fb53124f4a77c198bb1d2b35e8e54cb8704f2f04) chore: show loading spinner and disable the import CTA - [`beb1dd9`](https://github.com/hoppscotch/hoppscotch/commit/beb1dd97ebad1b6326b6307d52d245919768d461) feat: add loading state for import environment actions - [`cfecc22`](https://github.com/hoppscotch/hoppscotch/commit/cfecc22b8e11601e1460d3f8fdc4a3b9c5023cb1) chore: cleanup - [`45886a0`](https://github.com/hoppscotch/hoppscotch/commit/45886a06d12ff89e628974613b2813d3cce18aee) feat: extend loading state to all importer types ### 📊 Changes **9 files changed** (+194 additions, -93 deletions) <details> <summary>View changed files</summary> 📝 `packages/hoppscotch-common/src/components/collections/ImportExport.vue` (+73 -27) 📝 `packages/hoppscotch-common/src/components/collections/graphql/ImportExport.vue` (+1 -1) 📝 `packages/hoppscotch-common/src/components/environments/ImportExport.vue` (+70 -48) 📝 `packages/hoppscotch-common/src/components/importExport/ImportExportSteps/FileImport.vue` (+21 -8) 📝 `packages/hoppscotch-common/src/components/importExport/ImportExportSteps/MyCollectionImport.vue` (+6 -1) 📝 `packages/hoppscotch-common/src/components/importExport/ImportExportSteps/UrlImport.vue` (+13 -7) 📝 `packages/hoppscotch-common/src/helpers/import-export/import/import-sources/FileSource.ts` (+3 -0) 📝 `packages/hoppscotch-common/src/helpers/import-export/import/import-sources/GistSource.ts` (+4 -1) 📝 `packages/hoppscotch-common/src/helpers/import-export/import/import-sources/UrlSource.ts` (+3 -0) </details> ### 📄 Description This PR addresses the need for a loading state in the `Import/Export` modals that includes collections and environments in scope. Closes #4145 HFE-594. ### What's changed - Introduce state variables to keep track of the loading status during a network call while importing to the data store applicable to the team workspace. The `handleImportToStore` function promise resolution is awaited. - Introduce a `loading` prop to the `FileImport` & `UrlImport` components that default to `false` - toggles the `Import` CTA loading state accordingly. The import CTA stays disabled during a loading state. - Adds a `loading` prop to the `MyCollectionImport` component to handle the loading state with import from personal collections flow while at a team workspace. - The `FileSource()` & `UrlSource()` functions now include a new `isLoading` parameter via which the above state variables are supplied from the respective component. ### Note to reviewers Please verify the import collections/environments flow e2e. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>