[CreateTearsheet]: Optimize rendering of CreateTearsheet children

[mstathopoulou]

What will this achieve?

Enhancement of CreateTearsheet component so that the hidden children are not rendered in the DOM.

The current implementation of CreateTearsheet component employs a visibility-based approach to manage the rendering of form steps. More specifically, if a CreateTearsheetStep component has the property includeStep set to true, its turn is skipped. This means that even though a step may be hidden from view, its corresponding components are still being rendered within the DOM. As a result, unnecessary rendering could potentially impact performance, especially when dealing with a complex and dynamic CreateTearsheet flow where dozens of steps are being rendered.

The desired enhancement would alter the CreateTearsheet component's behavior to control the displayability of form steps.

cc @matthewgallo

[elycheea]

@mstathopoulou Moved this to a discussion for now since there’s probably a few different ways we could go about this.

[MartaMother]

Great !!!

[elycheea]

@davidmenendez this could be a good spot to share your prototype on how we could approach the tearsheets + create differently.