No feedback when triggering prebuilds

[atduarte]

Problem

After creating a project (gitpod-staging.com/new), since the prebuild didn't automatically run (at least, apparently) and I couldn't trigger it on the configuration page, I went to the prebuilds tab and triggered a prebuild.

That action resulted in no feedback. Refreshed but there was no entry in the list, so I tried again (multiple times?). 5 minutes later when I came back there were three prebuilds running.

Suggested solution

As an improvement, we should provide the user with immediate feedback (whether it started, or failed to start), if possible, by representing it in the list below.

[AlexTugarev]

PR #5116 will improve the situation by updating the Prebuilds page once a prebuild was enqueued.

There is still a gap to bridge between the action of a user and the backend events being propagated back to the frontend. It would make sense to add some intermediate state on the frontend to signal the start of an action. Once we receive the first event on a prebuild, it should be resolved accordingly.

[gtsiolis]

Thanks for noticing @atduarte!

From a relevant discussion (internal) (Cc @AlexTugarev):

Ideally, this button would trigger a modal for confirming triggering a new prebuild for the default branch.

From a relevant discussion (internal) (Cc @jankeromnes @svenefftinge @AlexTugarev):

In terms of UX, this button could trigger a modal to confirm prebuild on the default branch. Possible improvements could include selecting a different branch, passing an env var for a prebuild, etc.

[jankeromnes]

Thanks for this idea @gtsiolis!

I agree that a modal could be a good idea (separately), but it doesn't answer the question: What should the UI show between the moment the user clicked on Trigger Prebuild (or accepted the modal), and the moment we hear back from the server that a prebuild was started? This can take a few seconds, which as @atduarte described can be stressful / confusing for users if the UI shows nothing.

In the Project Configurator, when you click on Run Prebuild, the front-end immediately shows an "artificial" Pending state (which, after a few seconds, gets replaced with a "real" Pending status from the started prebuild -- but showing an immediate visual response to a user action is A+ UX 😁)

[jankeromnes]

Maybe a minimal viable change could be disabling the Trigger Prebuild button and adding a spinner to it while we wait for the server to call back?

[gtsiolis]

Hey @jankeromnes!

... but it doesn't answer the question ...

You're right! I'd consider this issue minor for shipping Teams & Projects but certainly something that needs to be resolved at some point. Pasting below another excerpt from the relevant discussions linked in #5374 (comment). 🙈

We could skip this and remove the button for this iteration if you think it’s redundant. The idea behind this is that for projects that the latest prebuild failed and you’d like to retry or all the prebuilds have been removed after two weeks, someone could trigger a prebuild from the dashboard.

However, if we want to ship this sooner and we have the bandwidth to add a fix here, showing a spinner + disabling the button on click as you mentioned in #5374 (comment) sounds optimal. 🎯

I refrained from suggesting this earlier as there are also a few more places where a loading button component variant could be used for consistency, like the git integration modal, but we can progressively add it there later. ➿

🍊 🍊 🍊 🍊

Maybe a minimal viable change could be disabling the Trigger Prebuild button and adding a spinner to it while we wait for the server to call back?

Let's do this to resolve this issue. Ideally, the spinner design would be the same we've already added in the configurator pages.

[gtsiolis]

Adding this to the Teams & Projects crew board. Cc @jankeromnes @AlexTugarev @svenefftinge

[jankeromnes]

Let's do this to resolve this issue.

Sounds good! Happy to help make it happen. 🚀

Ideally, the spinner design would be the same we've already added in the configurator pages.

Ah, this reminds me of an issue with the current spinner. Could you please provide a spinner SVG with transparent background? (Currently the center background has an explicit color, and making it transparent breaks the image, so it can be used on just one background color)

[gtsiolis]

Could you please provide a spinner SVG with transparent background?

On it. Will post here the SVG tomorrow. Thanks for noticing! 👀

[gtsiolis]

Incoming SVG for the spinner (loading icon)! 🍕

<svg width="16" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.055 9.771A8 8 0 0016 6h-4a4 4 0 11-6.828-2.828L2.343.343a8 8 0 1012.712 9.428z" fill="#A8A29E"/></svg>

Cc @jankeromnes

[jankeromnes]

Many thanks @gtsiolis!

However, the SVG is not square, so adding a spin animation to it makes it look like a misaligned wheel 😅 I've tried fixing the SVG coordinates manually, but didn't succeed.

Could you please provide another spinner SVG with transparent background and the same height & width? (So that rotating it around its center creates a perfect circle)

[JanKoehnlein]

/schedule

[roboquat]

@JanKoehnlein: Issue scheduled in the meta team (WIP: 0)

In response to this:

/schedule

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

[gtsiolis]

Oh, no! You're right @jankeromnes! Here's one with correct dimensions. 🙈

<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.055 10.77A8 8 0 0016 7h-4a4 4 0 11-6.828-2.828l-2.83-2.83a8 8 0 1012.713 9.429z" fill="#A8A29E"/></g><defs><clipPath id="clip0"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

[gtsiolis]

Small update to the SVG. Cc @jankeromnes

<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.77.945A8 8 0 0 0 8 0v4a4 4 0 1 1-2.828 6.828l-2.83 2.83A8 8 0 1 0 11.77.945h-.001Z" fill="#A8A29E"/></g><defs><clipPath id="a"><path fill="#fff" transform="rotate(-90 8 8)" d="M0 0h16v16H0z"/></clipPath></defs></svg>

[jankeromnes]

The new spinner is now merged, but the initial attempt to add visual feedback to the Trigger Prebuild button failed and we decided to close the PR. One step back, two steps forward. 🔜