• I have searched to see if a similar issue already exists.

Is your feature request related to a problem? Please describe.
Only render components that are visible.

Right now we have two main concepts of "visibility".

• the visible kwarg
• layout components that shows content with xor logic.

We currently render everything and just hide with CSS but this leads to a very large DOM and comes at a significant performance cost. This would be the number one thing we can do globally to improve performance of gradio apps. That is both startup performance and runtime performance. This would be especially huge for large applications that have hidden/ nested views.

Additional context

We actually used to do this, the reason we changed is because we don't actually have enough information stored globally to recreate a component in the exact state it was in previously. In fairness we only have this issue with a handful of components, the Image components is the biggest offender.

We need a way to serialise the state of each component with enough granularity that we can recreate it in the exact same way. Some of this 'state' is internal, so we need a way to externalise it, either via exporting everything as props or with some kind of function that a component defines that we can use to 'gather' this state when there is a visibility change.

Again, this is something we need to think through because it has implications for custom components.