Calculate slide width immediately

[adiba]

This line:

slider/src/SliderProvider/index.tsx

Line 85 in 68dd777

const [slideWidth, setSlideWidth] = useState<string | undefined>();

should instead be:

const [slideWidth, setSlideWidth] = useState(`${(slidesToShow > 1 ? 1 / slidesToShow : slidesToShow) * 100}%`);

to make use of server side rendering without layout shift.

[jacobsfletch]

Hey @adiba if I remember correctly we're not initializing slide width because that will cause layout shift the other way around-where slidesToShow is dynamic based on window width. For instance on mobile, the slider might initialize showing 3 then immediately jump to showing only 1 because the window width was populated in the browser. We don't have access to window width during initial state. So instead, we simply don't define slide width until we're certain it's unchanging.

[adiba]

Hey @adiba if I remember correctly we're not initializing slide width because that will cause layout shift the other way around-where slidesToShow is dynamic based on window width. For instance on mobile, the slider might initialize showing 3 then immediately jump to showing only 1 because the window width was populated in the browser. We don't have access to window width during initial state. So instead, we simply don't define slide width until we're certain it's unchanging.

Are you refering to the responsive slider?

slider/demo/ResponsiveSlider/index.tsx

Lines 18 to 20 in 1e4ab55

	const windowWidth = window.innerWidth;
	if (windowWidth < 768) setSlidesToShow(1)
	else setSlidesToShow(desktopSlidesToShow)

[JarrodMFlesch]

Personally I think this worry should be up to the component/developer. If I have a slider that always shows 2 slides, I have to eat the layout shift on the first render cycle even though there is no change.

I feel like that should be up to the developer, who knows that the window width is unknown on first pass. If I want to wait for the window width to be known before showing the slider I should render a loader in place of the slider - or eat the layout shift.