Wp-calypso: Gutenboarding: loading animation across site creation and editor loading

[Addison-Stavlo]

Problem

In Gutenboarding: After selecting "Create My Site" it takes some time for the site to be created before the editor begins loading. Loading experience between "create site" and the editor is janky and dry.

Ideal

One, continuous fun loading animation without extra things like cookie banner.

Current loading animation

Here's a screencast of the flow and here are the current steps from that screencast:

1. Start with the "create site" button. When authenticated, this will launch the loading sequence. When unauthenticated, we would first show them the signup form and then proceed with loading.

   

2. Loading while we're creating the site and waiting back from the API.

   

3. We've created the site and now we're booting up rest of Calypso (instead of Gutenboarding entry point) to load the WP Admin iframe.

   

4. WP Admin iframe and Gutenberg editor starts loading. Cookie banner pops up. The help bubble shows up.

   

5. There's a moment of a white screen before the editor loads.

   

6. The block editor. With cookie banner.

   

Tasks & ideas

• [ ] Have one continuous loading animation from when a user hits "create site" (when authenticated) or succeeds to signup or login (when unauthenticated):

  • No "W" logo in the middle of the loading animation
  • No "jump" in the animation in the middle if possible. Can we show just one animation across the whole loading process, or continue the same animation across two different codebases? Should we import the editor iframe to Gutenboarding so that we don't have to load the rest of Calypso to load the editor?

• [ ] Just having different animation in general because the current is super dry:

  • Could the animation be different at the beginning, middle and towards the end, instead of looping one short animation?
  • Could it tell a story with quick funny texts changing over across the whole flow? Examples: _“creating pages”, “mixing up colors”, “optimizing for mobile”, “requesting a preview of your new site", "reticulating splines", "downloading unicorn models",_ etc…
  • Could it include a nice lively animation? Something like this or this or this.
  • Can the loading animation fade or jump out to reveal the block editor?

• [ ] Remove (or move elsewhere) the cookie banner that pops up when starting to load Gutenberg iframe.

  • We already ask for this at the beginning of the flow here — can we do away without one in onboarding flows?
    

• [ ] Delay showing the help bubble

  • Can we animate it into view after FSE has been fully loaded, or even after the customer closes the welcome modal?

• _Anything else?_

@Automattic/gutenboarding-design @ramonjd

[simison]

In Gutenboarding: After selecting "Create My Site" it takes a few seconds for the site to be created before the editor begins loading. Instead of 'hanging' on the last page for these few seconds it would be good to have a "Creating your site..." style loading screen to ensure the user that the process is in action.

We are currently adding a rough placeholder for this time between triggering site creation and loading the editor:
[...]

But will patiently await a better design to implement once ready.

I think we can split this to a few separate chunks of work that we can already start without design. Furthermore, we can do a lightweight prototype of a "continuous loading screen across all these steps".

I'll update the issue description.

[joanrho]

@simison @Addison-Stavlo A prototype sounds like a great idea for this to improve the long and somewhat bland loading experience between clicking “Create my site” and the Editor.

I really like all of Addie's ideas mentioned above, in particular, using one of our existing loading animations. The second option feels great.

Let's also implement Addie's other suggestions to remove the cookie banner (redundant) and delay the help bubble (don't need them at this point until Editor appears) during this. If we need the cookie banner to reappear, Customer Home might be a better location once users are onboarded and the preliminary things are set up.

[Addison-Stavlo]

I think most of those are @simison 's suggestions (not mine), he updated my very short issue post I had initially with all this good stuff you see now. 🎉 Much Thanks!

But I agree, it seems like a good path forward!

[simison]

Thanks everyone! Hehe well Kudos Addison for recording a follow-up issue I could reuse. :-)

[ramonjd]

I've been looking forward to this one for ages, thank you!

Could it tell a story with quick funny texts changing over across the whole flow?

Or it could rotate through some relevant tips. There are a bunch of already-translated tips to be found in places like https://github.com/Automattic/wp-calypso/tree/25d2ca0bf9148864d430e99304688a6019439b99/client/layout/guided-tours/tours

Could it include a nice lively animation?

Canvas-based jumping T-rex game anyone? :)

[simison]

We'll need to update this with what's in Figma: