Explain what is loading on the Run pipeline variables form

What does this MR do and why?

On the Run pipeline page, the variables form showed a bare spinner while prefill variables resolve from the CI/CD configuration. Nothing said what was loading or that it might take a moment; customers on the issue described the form as feeling broken and refreshing repeatedly. This adds centered help text under the spinner naming the work and setting the expectation:

  • Loading CI/CD variables from the pipeline configuration.
  • This might take a few seconds.

This is Problem 1 of the issue, the only one still open: Problem 2 (error feedback) is handled by the Failed to retrieve CI/CD variables. alert and Problem 3 (proceed manually when loading stalls) by the polling cutoff that renders the empty form after CI_FORM_MAX_POLLING_TIME. The issue's mock left the exact wording open ("UI text needs to be reviewed"); the primary line here names what loads, per the problem statement and the sibling error copy. Technical writing review of the copy is expected during review.

variables_form.vue has two consumers: the Run pipeline form (passes isLoading while fetching config variables) and the pipeline schedules form (never sets isLoading, so its rendering is unchanged).

References

Related to Add more clarity when loading the variable in the Run Pipeline page (#389578).

Screenshots or screen recordings

Before After
variables_loading variables_loading

Loading state frozen by holding the ciConfigVariables query server-side. The Inputs section's own skeleton loading state is identical on both sides.

How to set up and validate locally

  1. In a project with a .gitlab-ci.yml that defines variables with descriptions, go to Build > Pipelines > New pipeline.
  2. While the variables resolve (throttle the network to see it clearly), the spinner now carries the explanation text.
  3. Once loaded, the form renders exactly as before.

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.

Edited by Paul W

Merge request reports

Loading
Loading