Description
Problem to solve
Currently, the loading pattern used for opening and stopping a dev environment a) contains limited information, b) lacks proper visual feedback, c) inherits some browser performance issues, and more.
More specifically here are some primary issues related to this pattern:
- Does not contain any context on what environment is starting.
- Does not differentiate opening a running environment from stopped or new environment.
- The same loading pattern is used for stopping an environemnt.
- Does not surface the benefit of using a build (see Prebuilds).
- Users have reported several times that the loading stops with never opens the IDE.
Here are some secondary issues related to this pattern:
- The floating animated logo on both starting and stopping pages comes with a performance cost, see [Dashboard] Better Stopped Screen #2192 (comment).
- The progress bar on the top of the page remains fully loaded at all times when stopping an environment.
- ...
Research
According to research, progress indicators make a slow system less insufferable.
Wait animations, such as percent-done bars and spinners, inform users of the current working state and make the process more tolerable to the user by reducing uncertainty. Users experience higher satisfaction with a site and are willing to wait longer when the site uses a dynamic progress indicator.
Goals
Following the goals from the original design doc (internal) (cc @svenefftinge):
Make the loading pattern for opening environments informative (context + errors), engaging (fun), educational (informing the user about shortcuts, features, and more), faster (perceived experience), and encouraging (inform the user how they benefit from prebuilds, etc).
Proposal
TBD (To be discussed)
For example, surfacing the benefit of using Prebuilds can be also part of this loading pattern by highlighting an already completed step for opening a new environment. To visualize this here's how a graphic affordance in the loading pattern when opening an environment could highlight this benefit before even adding the prebuilds within the dashboard:
| Without Prebuilds | With Prebuilds ⚡ |
|---|---|
 |
 |