Virtual Slides in react with asynchronously added content?

[justinhelmer]

Context

I have a Swiper with a ton of slides and very large images (tens of thousands of px).

This results in two performance bottlenecks:

1. Render performance
2. Browser thread limit

To mitigate (1), I am using the strategy outlined here. I have a user action that enables opening the full size image in a new tab, so I want to avoid having to generate smaller versions of the images just for the purpose of rendering in the Swiper. Instead, the strategy of using an image load event and drawing a canvas works very well.

To mitigate (2), ideally I would be able to just use loading="lazy". However, the strategy in (1) means that there are no images being rendered to the DOM; instead, a canvas element is being injected asynchronously.

For this reason, the "virtual slides" approach seems like a good one.

Problem

When using virtual slides with react, and dynamically injecting the content, transitioning between slides can create some race conditions related to the timing of image loads. Even when the critical race conditions are mitigated, it still can cause "flicker" as well as redundant fetches.

Example

// @file overlay.tsx
const Overlay = () => {
  return (
    <Swiper modules={[Virtual]} virtual>
      {photos.map((photo, index) => (
        <SwiperSlide key={photo} virtualIndex={index}>
           <Screenshot endpoint={buildUrl(photo)} />
        </SwiperSlide>
      ))}
    </Swiper>
  );
};

// @ffile screenshot.tsx
const Screenshot = ({ endpoint }: ScreenshotProps) => {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    const url = `${import.meta.env.VITE_API_ROOT}/${endpoint}`;
    if (canvasRef.current) {
      const image = new Image();
      image.src = url;
      
      // console.log('about to load image', endpoint)
      image.onload = function () {
        if (canvasRef.current) {

          // Image is loaded; now, resize it
          resizeImage(canvasRef.current, image);
        }
      };
    }
    // Because we use swiper virtual columns, the same Screenshot instance is reused with a different endpoint.
    // When the endpoint changes, we need to load the new image and render it
  }, [endpoint]);

  return (
    <div className="image-wrapper">
      <canvas ref={canvasRef}></canvas>
    </div>
  );
};

When using images, virtual columns works like a charm, as well as lazy loading. Its just this dynamically injected canvas that is an issue.

Here is an example. The issue becomes most noticeable when opening the replit in a new tab and using keyboard controls.

Any help would be greatly appreciated.

It might be considered a bug, but wanted to try the community first.