POC: Fix merge request pipelines loading state when Run Pipeline is clicked
Issue: Update merge request pipelines table to use rea... (#568346) • Sahil Sharma • 18.8 • Needs attention
What does this MR do and why?
When the Run Pipeline button is clicked in the pipelines tab for merge requests, we trigger an async POST request to create a new pipeline run and start a loading animation. However, the process to create a new pipeline run takes a considerable amount of time, causing the loader to persist until the GET pipelines.json response returns with the new pipeline run.
This approach is stateless and not user-friendly because if the user reloads the page (after running out of patience), they would not see any loading animation even if the pipeline run has not been created. They would then attempt to run the pipeline again by clicking the button.
To fix this issue, I've added the existing pipeline_creating? property from the MergeRequest model to the GET pipelines.json response. Based on the value of this property, I am enabling/disabling the loading animation, which makes the animation persist even after the user reloads the page.
References
| Before | After |
|---|---|
| Screen_Recording_2025-09-10_at_11.00.22 | Screen_Recording_2025-09-10_at_10.55.24 |
How to set up and validate locally
- Checkout this branch and open
/gitlab-org/[PROJECT_ID]/-/merge_requests/[MR_ID]/pipelinesfor a project with a defined.gitlab-ci.yml - Click on
Run Pipelinebutton. Ensure that you see the skeleton loader in the pipelines table and theRun Pipelinebutton gets disabled while loading. - Refresh the page, and verify that the both the loading states are still there.
- Once a new pipeline has been created, verify that the skeleton loader has been replaced by a new pipeline row and the
Run Pipelinebutton gets enabled again.
MR acceptance checklist
Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.