search

maxmarinich / react-alice-carousel

React responsive component for building content galleries, content rotators and any React carousels
MIT License
832 stars 91 forks source link

Avoid layout shift? #303

Closed NoxQ closed 8 months ago

NoxQ commented 8 months ago

Is there any way I can preload the carousel's height or similar in order to avoid layout shift?

Even on localhost it takes about 0.5s for the carousel to show up which causes a serious layout shift.

This is an issue as the carousel is on the landing page.

maxmarinich commented 8 months ago

Hi, @NoxQ! Obviously, the problem does not belong to the library. To avoid the flicks you should know the height of the first slide(s). For example, the height of the first slide is 200px, then you should set minHeight: 200 for the slide element using CSS or inline styles. If the loading latency is high, use a loading skeleton to close the loading space. Please see the examples.

NoxQ commented 8 months ago

Yes you're right that it's not an inherent problem with the library. I was thinking something like a "placeholder" like the Image component in NextJS has where it would immediately display something before fully loading.

The problem with your example is that the size of the first slide might be dynamic so hardcoding it wouldn't work.