Frontend: Add more clarity when loading the variable in the Run Pipeline page

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

• Close this issue

Overview

More context in the thread #381233 (comment 1255174528)

Problems to solve

• Problem 1: When there is loading, it does not communicate what it does.
• Problem 2: There is no error message appearing after the timeout (30sec).
• Problem 3
  • Context: If the variables are not loaded yet, but users would like to create variables manually and run the pipeline.
  • Problem: It is not easy to understand if the loading progress is finished or not.

Proposals

• To Problem 1: While we are fetching, we show a loading icon with the help text.
  • UI text needs to be reviewed.

• To Problem 2: Add an error alert as @mgandres suggested in the thread.
  • UI text needs to be reviewed.

• To Problem 3: (Need to be discussed)
  • As @grzesiek's suggestion: We could provide a confirmation modal Do you really want to create a pipeline without loading prefill variables?
  • As @mgandres's suggestion: If 5 seconds have passed and the cache is still empty, we show the form so users who just want to manually run a pipeline without updating the variables can proceed. Instead of an alert, we show a loading icon (or something similar, I'm not sure what's the best UI here) and inform the user that we're still loading the config variables,

Once the variables are fetched, we allow them to load on the form. This does not refresh the page, it only appends the fetched values to the form. We can also just add them right away, but it might come as a "surprise" to the user if the form just updates on it its own.