You can trigger an installable build for these changes by visiting CircleCI here.

This is looking so good @etoledom! I'd like to try out a test build before giving this a final sign-off, but it's looking really solid — title/body items seem to line up really well and the timing feels pretty good.

I have one small request, which I think only applies to dark mode: Can we fill the background of the "ghost" block toolbar in the same color as the "real" block toolbar? The items over the toolbar would then need to use a slightly lighter gray. I think this probably isn't an issue in light mode bc the toolbar is the same color as the background.

Thank you both for your reviews!

I have implemented the requested improvements from @iamthomasbishop :

Dark Mode	Light Mode

I have also triggered the Test Build to be able to see it better than with gifs 👍

You can trigger optional UI/connected tests for these changes by visiting CircleCI here.

@etoledom this is feeling super smooth. Funny enough, the editor loads so quickly in most cases that you don't see the loading state for more than a split second — obviously a great problem to have 😄

I noticed 1 tiny thing — in dark mode, can we remove the border-top on the block toolbar while loading?

Does it need to be different than browser's? And why?
If it does, would it make sense to align there?

@pablohoneyhoney AFAIK this is using our fully-native loader components (which use the system-defined colors). It’s feels pretty similar to what exists on web, so I think we are in good shape WRT alignment.

in dark mode, can we remove the border-top on the block toolbar while loading?

Done!

AFAIK this is using our fully-native loader components

That's correct, at this point everything is pure native.

@iamthomasbishop - ready for another look 👀

@guarani - There has been quite a few changes since the last review. Would you mind taking a fast look again?
Thanks!

Tested and working great! LGTM @etoledom!

@pablohoneyhoney AFAIK this is using our fully-native loader components (which use the system-defined colors). It’s feels pretty similar to what exists on web, so I think we are in good shape WRT alignment.

If we consider the below, there are ways to have more proximity @iamthomasbishop

Ah, fair enough @pablohoneyhoney. I was thinking the ghost items on the web were also positioned over the actual UI elements (as we are doing on mobile, where the ghost elements are sized and positioned over the title, body, and block toolbar). Do you think it'd make sense for web to adopt the same concept? If so, it shouldn't be a huge challenge, although the web UI changes so often that we'd want to keep an eye on it over time.

If we consider the below, there are ways to have more proximity @iamthomasbishop

I agree with @iamthomasbishop

The web ghost resembles the top toolbar and content. On mobile we don't have top toolbar so it makes sense to resemble the mobile layout with the toolbar at the bottom.

Updated to target gutenberg/after_1.31.0

@iamthomasbishop - Do we have your ✅ ?

@etoledom can you please recreate this PR and target the develop branch. It got closed automatically when I deleted the after branch. Sorry about that.

I reopened the after branch if you want you can merge there if you want to target 15.3 release.

If you want to target 15.2 you can target directly develop.

Howdy friends – we're freezing 15.2 today, so I'm bumping this PR forward to 15.3. If it needs to land in the 15.2 series, please merge it to release/15.2 and DM me – I'll be happy to create a new beta release!

@etoledom just tested on iPhone and iPad, and it’s really feeling great! I think it’s ready to ship! Now we just need to implement this on Android ;)