Trick: How to remove seeing too many images on SSR

[skreutzberger]

I just found a solution for a problem which I had with Solid Slider when using with Solid Start and SSR.

On SSR, the downloaded HTML page already contains all the images which should be in the slider. The issue is that these images are visible UNTIL the slider Javascript is downloaded and executed which can lead to an ugly flickering effect if the slider width and/or height are not properly set or must stay flexible.

The solution:

1. add the style display:none (or the class "hidden" if you use TailwindCSS) to all images but the first one on the server-rendering to hide them on static page rendering
2. listen to the created event hook of the slider and when it is created (so its Javascript is downloaded and run) then loop over all remaining images of the slider and remove the style.

During

const sliderOptions = {
    loop: true,
    created: slider => {
      console.log("slider created", slider)
      slider.slides.forEach(slide => {
        slide.classList.remove("hidden")
      })
    }
  }
  const [slider, { current, next, prev, moveTo, details }] = createSlider(sliderOptions)

and in the render return do something like this assuming you have an array of image objects:

return (
<div use:slider>
  <For each={images}>
    {(image: Image, index: Accessor<number>) => (
      <img
        src={image.URL}
        width="370"
        height="247"
        class={index() != 0 && "hidden"}
      />
    )}
   </For>
</div>)

Feel free to take my trick and put a potentially nicer version into the README or so because I guess as more Solid will be used on the server to render as more often the flickering will be reported.