Alpine and cumulative layout shift?

[v-marinkov]

I just discovered Alpine.js and I am very intrigued but I wonder about the following example.

Say I have a "ul" which uses an Alpine loop to generate the "li"'s. These could be fairly large elements with text, photos, etc. Given that the li's are not part of the html DOM but Alpine injects them there, would that cause massive CLS by pushing old content down to make room for the injected li's?

Is this a valid concern? If yes, how do we solve it? By setting min-height on the "ul"?

[danddanddand]

The way I solve it is by server side rendering the content or a loading skeleton in a div that has something like x-show="!isInitialized". Then I have the alpine version as sibling div nested as x-if or x-for that would do the alpine rendered version. So when page loads, it replaces the server side rendered content/skeleton with alpine controlled version.

We don't have to do this a ton and it's a pain in the ass so maybe someone else has better solution.