⚛️ Use Suspense and lazy to Hydrate views that were not registered before calling hydrate()

[DAreRodz]

Coauthored with @c4rl0sbr4v0

This PR replaces the Map we used to store the View components with an object with a similar API. The difference is that the method get returns a promise that resolves once the View component is registered.

With that Promise, we can use Suspense and lazy to pause hydration until the components are ready.

[luisherranz]

LGTM 🙂👏

Note for the future: if we want to use async, this code needs to be included in each bundle. To save some bytes on each bundle, I think we could find a way to move the promise-related logic to the hydration file instead. But this is perfect for now, thanks folks! 🎉

[DAreRodz]

That was fast!! 😆 🚀

[michalczaplinski]

Nice work 👏

It's very similar to the work Bernie and me did in Woo-BHE to solve the problem of hydrating blocks when their views get registered too late:

woocommerce/woocommerce-blocks-hydration-experiments@8edc7b2

We ended up not using that code in the end because the problem because there was a simpler solutionat the time.

[DAreRodz]

Hey @michalczaplinski, I wasn't aware of that code! I see it's very similar, although it's using a Proxy to detect the Component's registration. Thanks for sharing it. 😊