can you describe in more detail? @gin

<Loading/> prerendered based on the wrapped component inside suspense

like this but dynamically based on the layout

Nope, impossible

😭

what's the trouble, anyway you have to create different loading UIs for your components right?

yeah its a luxury thing

i could just reuse the same one but i was thinking maybe there is a way

guess i have to fallback to the primitive solution

The real component is a child prop of <Suspense />, fallback UI is the property of <Suspense />
How can fallback UI be rendered conditionally for different child which is unknown?

did you mean something generating the skeleton for any UI automatically?

thats why i was saying prerendered and also maybe there could have been a way for the compiler to know what it is expeting cause <Suspense/> is also accepting the rendered component itself as child get it

so Suspense knows the tsx from suspended component and the tsx from the fallback component in theory

sorry nothing makes sense to me.

so you are basically talking about this?

yes

wait let me explain easier for you

lol, no one would be interested in it when he creates a framework

then @gin can you create a component that recieves any UI component (which has states and props) and return skeleton ui for it?

i can but im fearing it will impact perfomance, what i could do is creating a simple tool that generates the skeleton ui based on the tsx structure

without the dynamic aspect

so something thirdparty that can be used for the codebase

so we still have unique loading ui's but already defined

really? so let say you have to create a skeleton for <Card /> component.
and inside <Card /> you have other components used inside it.
How will you create a skeleton UI for <Card /> and how much do you think the cost is?

Let say the <Card/> component has childs as components nested, than i would recognize that and just display a defined block with a responsive fixed height and width. So we always show a block like this for nested components. For text and layout we can easily compute that and display a smaller skeleton. Im just thinking about how we would know the flex properties and alignment of the structure. Maybe recognizing the tailwind classes or something like this

or there is a api for the structure based on the react node

so react tells us how the component is structured with the computed layout

If you can really create a library for that it will be top 1 in npm ranking!

i will look for already existing ones and if i don't find any i will try to implement myself

thanks for your answers