starred/hoppscotch

Fork 0

mirror of https://github.com/hoppscotch/hoppscotch.git synced 2026-04-26 01:06:00 +03:00

[GH-ISSUE #4145] Import actions within the `Import/Export` collections modal need a loading state #1491

New issue

Closed

opened 2026-03-16 20:33:11 +03:00 by kerem · 8 comments

kerem commented

2026-03-16 20:33:11 +03:00

Owner

Originally created by @jamesgeorge007 on GitHub (Jun 25, 2024).
Original GitHub issue: https://github.com/hoppscotch/hoppscotch/issues/4145

Originally assigned to: @HelixY2J on GitHub.

Note

This is intended for FOSSHACK participants.

Description

While importing a large collection in a team workspace, it'll be nice to have a loading state for the Import button while the network calls happen behind the scenes.

https://github.com/hoppscotch/hoppscotch/assets/25279263/0c773ddb-c0c6-4e3d-aed4-679b2a8a318f

It should also stay disabled to prevent creating duplicate entries if clicking Import multiple times.

Originally created by @jamesgeorge007 on GitHub (Jun 25, 2024). Original GitHub issue: https://github.com/hoppscotch/hoppscotch/issues/4145 Originally assigned to: @HelixY2J on GitHub. > [!NOTE] This is intended for [FOSSHACK](https://github.com/hoppscotch/hoppscotch/discussions/4131) participants. ### Description While importing a large collection in a team workspace, it'll be nice to have a loading state for the `Import` button while the network calls happen behind the scenes. https://github.com/hoppscotch/hoppscotch/assets/25279263/0c773ddb-c0c6-4e3d-aed4-679b2a8a318f > It should also stay disabled to prevent creating duplicate entries if clicking `Import` multiple times.

kerem

2026-03-16 20:33:11 +03:00

closed this issue
added the
fosshack
label

kerem commented

2026-03-16 20:33:28 +03:00

Author

Owner

@kyoichishido commented on GitHub (Jun 25, 2024):

Hi, I wanna work on this, please assign me. I can't find the guide to set-up this repo locally

@kyoichishido commented on GitHub (Jun 25, 2024): Hi, I wanna work on this, please assign me. I can't find the guide to set-up this repo locally

kerem commented

2026-03-16 20:33:33 +03:00

Author

Owner

@jamesgeorge007 commented on GitHub (Jul 4, 2024):

Hi @kyoichishido, sorry for the delayed response. To reiterate, this is intended for FOSSHACK participants. Please make sure to register as a participant if you haven't already. You can find more information here.

Follow the below steps to set up the repo locally.

Please ensure the prerequisites are met by following the guide here.
Clone the repo locally and navigate to the path.
Create a .env file at the project root copying over the contents from .env.example. More information can be found here.
The codebase is a monorepo based on pnpm workspaces. Run pnpm i at the project root that will install the dependencies followed by running the postinstall script for the applicable packages.
Run pnpm dev from the same path that spins up the dev server.

You can get up and running quickly with the above steps. To enable any functionality behind login, you'll have to set up the backend container following the steps below.

Backend setup

Create relevant OAuth apps to enable third-party authentication referring to the guide here.
Build the backend container via docker compose build hoppscotch-backend.
Now run docker compose run --entrypoint sh hoppscotch-backend.
The above command opens a shell inside an instance of the backend container. Now run pnpm prisma migrate deploy to run the migrations. More information can be found here.
Spin up the backend container via docker compose up hoppscotch-backend.

Alternatively, you can use the AIO container which is a single container that provides all the services required to run Hoppscotch.

P.S: Any updates locally will require rebuilding the AIO container. For development, the above approach where the FE dev server is spun up locally along with the backend container would suffice.

# Build the container locally
docker compose build hoppscotch-aio

# Run migrations
docker compose run --entry-point hoppscotch-aio

# While at the launched shell with the above command
pnpm prisma migrate deploy

# Followed by
docker compose up hoppscotch-aio

Let us know if you have any questions.

@jamesgeorge007 commented on GitHub (Jul 4, 2024): Hi @kyoichishido, sorry for the delayed response. To reiterate, this is intended for [FOSSHACK ](https://fossunited.org/fosshack/2024)participants. Please make sure to register as a participant if you haven't already. You can find more information [here](https://github.com/hoppscotch/hoppscotch/discussions/4131). Follow the below steps to set up the repo locally. - Please ensure the prerequisites are met by following the guide [here](https://docs.hoppscotch.io/documentation/self-host/community-edition/prerequisites#install-node-js-npm-pnpm). - Clone the repo locally and navigate to the path. - Create a `.env` file at the project root copying over the contents from [.env.example](https://github.com/hoppscotch/hoppscotch/blob/main/.env.example). More information can be found [here](https://docs.hoppscotch.io/documentation/self-host/community-edition/install-and-build#configuring-the-environment). - The codebase is a monorepo based on [pnpm workspaces](https://pnpm.io/workspaces). Run `pnpm i` at the project root that will install the dependencies followed by running the [postinstall script](https://docs.npmjs.com/cli/v10/using-npm/scripts#pre--post-scripts) for the applicable packages. - Run `pnpm dev` from the same path that spins up the dev server. You can get up and running quickly with the above steps. To enable any functionality behind login, you'll have to set up the backend container following the steps below. > Backend setup - Create relevant OAuth apps to enable third-party authentication referring to the guide [here](https://docs.hoppscotch.io/documentation/self-host/community-edition/prerequisites#oauth). - Build the backend container via `docker compose build hoppscotch-backend`. - Now run `docker compose run --entrypoint sh hoppscotch-backend`. - The above command opens a shell inside an instance of the backend container. Now run `pnpm prisma migrate deploy` to run the migrations. More information can be found [here](https://docs.hoppscotch.io/documentation/self-host/community-edition/install-and-build#running-migrations). - Spin up the backend container via ` docker compose up hoppscotch-backend`. Alternatively, you can use the [AIO container](https://docs.hoppscotch.io/documentation/self-host/community-edition/install-and-build#using-the-aio-container) which is a single container that provides all the services required to run Hoppscotch. P.S: Any updates locally will require rebuilding the AIO container. For development, the above approach where the FE dev server is spun up locally along with the backend container would suffice. ``` # Build the container locally docker compose build hoppscotch-aio # Run migrations docker compose run --entry-point hoppscotch-aio # While at the launched shell with the above command pnpm prisma migrate deploy # Followed by docker compose up hoppscotch-aio ``` Let us know if you have any questions.

kerem commented

2026-03-16 20:33:38 +03:00

Author

Owner

@HelixY2J commented on GitHub (Jul 11, 2024):

I am participating in FOSS Hack where I have registered and joined a team. My initial approach for this is to set a flag that will disable the button and show a loading message while the async process is running. Once the process completes, the flag will be toggled back.Can this issue be assigned to me?

@HelixY2J commented on GitHub (Jul 11, 2024): I am participating in FOSS Hack where I have registered and joined a team. My initial approach for this is to set a flag that will disable the button and show a loading message while the async process is running. Once the process completes, the flag will be toggled back.Can this issue be assigned to me?

kerem commented

2026-03-16 20:33:43 +03:00

Author

Owner

@jamesgeorge007 commented on GitHub (Jul 11, 2024):

Hi @HelixY2J, thanks for expressing interest. @kyoichishido, can you confirm if you've registered as a participant and like to pick this up? Else, this can be assigned to @HelixY2J.

@jamesgeorge007 commented on GitHub (Jul 11, 2024): Hi @HelixY2J, thanks for expressing interest. @kyoichishido, can you confirm if you've registered as a participant and like to pick this up? Else, this can be assigned to @HelixY2J.

kerem commented

2026-03-16 20:33:48 +03:00

Author

Owner

@jamesgeorge007 commented on GitHub (Jul 23, 2024):

Assigning this to @HelixY2J.

@jamesgeorge007 commented on GitHub (Jul 23, 2024): Assigning this to @HelixY2J.

kerem commented

2026-03-16 20:33:53 +03:00

Author

Owner

@HelixY2J commented on GitHub (Jul 28, 2024):

I created a reactive variable "isImporterInProgress "using Vue ref function and added it into the existing import logic in collections/importexport.vue. It will be set true when the import starts and reset to false after completion.Can I get some feedback on whether this approach is appropriate or there are any alternative methods that should be considered for handling the loading state

@HelixY2J commented on GitHub (Jul 28, 2024): I created a reactive variable "isImporterInProgress "using Vue ref function and added it into the existing import logic in collections/importexport.vue. It will be set true when the import starts and reset to false after completion.Can I get some feedback on whether this approach is appropriate or there are any alternative methods that should be considered for handling the loading state

kerem commented

2026-03-16 20:33:58 +03:00

Author

Owner

@jamesgeorge007 commented on GitHub (Jul 28, 2024):

Hi, a quick suggestion regarding the behaviour. It would be nice to have a loading spinner before the button label Import while the button stays disabled. Since it wasn't explicitly stated initially and the hacking period is about to end, we'll consider the existing implementation and bring in any changes as required during the evaluation period.

@jamesgeorge007 commented on GitHub (Jul 28, 2024): Hi, a quick suggestion regarding the behaviour. It would be nice to have a loading spinner before the button label `Import` while the button stays disabled. Since it wasn't explicitly stated initially and the hacking period is about to end, we'll consider the existing implementation and bring in any changes as required during the evaluation period.

kerem commented

2026-03-16 20:34:03 +03:00

Author

Owner

@jamesgeorge007 commented on GitHub (Oct 7, 2024):

Implemented in #4217 and released as part of v2024.9.0.

@jamesgeorge007 commented on GitHub (Oct 7, 2024): Implemented in #4217 and released as part of v2024.9.0.

kerem referenced this issue

2026-03-17 00:58:31 +03:00

[PR #1491] [MERGED] [Feat/form data] Remove file fields from collections #3354