it it possible to prerender a loading ui based on the component structure in next

[turbid tangle]

so when using suspense for example you dont have to build a skeleton loader for the component

[sour adder]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[teal lake]

can you describe in more detail? @turbid tangle

[turbid tangle]

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

like this but dynamically based on the layout

[teal lake]

Nope, impossible

[turbid tangle]

😭

[teal lake]

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

[turbid tangle]

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

[teal lake]

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?

[turbid tangle]

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

[teal lake]

sorry nothing makes sense to me.

[teal lake]

so you are basically talking about this?

[turbid tangle]

yes

[turbid tangle]

wait let me explain easier for you

[teal lake]

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

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

[turbid tangle]

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

[teal lake]

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?

[turbid tangle]

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

[teal lake]

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

[turbid tangle]

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