Visual glitch when loading multiple paragraph blocks within a Reusable block

[fluiddot]

Describe the bug
Having multiple paragraph blocks in a Reusable block produces a visual glitch the first time the block is loaded.

This bug will be introduced when merging the PR: [RNMobile] Add support Reusable blocks and registering the Reusable block type.

To Reproduce
Steps to reproduce the behavior:

1. Create a post in the web version
2. Add at least four or five paragraph blocks and create a Reusable block
3. Open the app
4. Open the post previously created in the web version

Expected behavior
The loading of the blocks shouldn't produce any visual glitch.

Screenshots

The glitch only happens for some frames so the video's speed has been reduced to 10% to watch it properly. For debugging purposes I changed the background color of the paragraph blocks to red so it's easier to see the blocks' content size.

loading-glitch-slowmo.mov

As you can see in the video the blocks height is bigger than the content at the first frames and then they fits the content.

Smartphone (please complete the following information):

• Device: iPhone 8 (Simulator)
• OS: 14.0
• Version 16.4 (DEV)

Additional context
Add any other context about the problem here.

[iamthomasbishop]

@fluiddot Do we have the ability to estimate what the final dimensions of the block will be (after load)? If we're unable to fix the "flickering", perhaps we could add some sort of overlay on top of the block while it is loading, with some sort of loader/spinner icon, or alternatively some sort of "skeleton" UI like the UI that shows while the editor itself is loading.

[fluiddot]

@fluiddot Do we have the ability to estimate what the final dimensions of the block will be (after load)? If we're unable to fix the "flickering", perhaps we could add some sort of overlay on top of the block while it is loading, with some sort of loader/spinner icon, or alternatively some sort of "skeleton" UI like the UI that shows while the editor itself is loading.

I'd need to check but when I did the first research I didn't find a way to be notified when the final dimensions are calculated. In fact I think this issue about rendering the blocks with a greater size is related to that part because adding more text lines increases the initial size.

I like the idea of adding a loader/spinner or even a "skeleton", the only problem is that we don't know when the final size is ready but as a workaround, we could try adding an extra delay after the block is rendered the first time.

I'm not very convinced about adding an artificial delay because we don't know how much time we need for preventing the glitch to be shown. However if we don't find a better solution it could work.