Best way to wait for https content to load

[IvanDhalluin]

Hi,

First, thanks for your amazing work, this lib is (will be really) usefull to me.

I'm trying to compute video from SVG sequence. Here I'm just generating a black and white slideshow off an array of image.

This is working but I have a small issue, I need to wait some times, here 250ms to be sure the image is loaded. Otherwise the first frame(s) of each image will be white.

import React, { useEffect } from 'react'
import { Segment, useAsyncRenderer } from 'reactive-video'

const images = [
  'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
  'https://images.unsplash.com/photo-1454496522488-7a8e488e8606?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1176&q=80',
  'https://images.unsplash.com/photo-1483728642387-6c3bdd6c93e5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1176&q=80'
]

function SvgImage({ url }) {
  const { waitFor } = useAsyncRenderer()
  useEffect(() => {
    waitFor(async () => {
      await timeout(250)
    })
  }, [waitFor])

  return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
      <defs>
        <filter id="black-and-white" colorInterpolationFilters="sRGB">
          <feColorMatrix in="SourceGraphic" type="saturate" values="0" result="blackAndWhite" />
          <feComponentTransfer in="blackAndWhite">
            <feFuncR type="table" tableValues=".01 .25 .82 1" />
            <feFuncG type="table" tableValues=".01 .25 .82 1" />
            <feFuncB type="table" tableValues=".01 .25 .82 1" />
          </feComponentTransfer>
        </filter>
      </defs>
      <image x={0} y={0} width={'100%'} height={'100%'} xlinkHref={url} preserveAspectRatio="xMidYMid slice" filter={`url(#black-and-white)`} />
    </svg>
  )
}

export default () => {
  return (
    <>
      {images.map((url, i) =>
        <Segment key={url} duration={30} start={30 * i}>
          <SvgImage url={url} />
        </Segment>
      )}
    </>
  )
}

Do you think there is a better way to achieve this?

[mifi]

Hi! Maybe you can move the <image> out of the svg itself and instead use the Image component from reactive-video, as it will wait for the image to load. if not, then you could probably use a new Image() with onload inside useForAsyncRenderer

[IvanDhalluin]

Thanks for your help.
I tried some of that and here is what seems to be the easiest for my usecase :

await fetch(url) // the browser cache will make it the same as onLoad but without the extra lines 
await timeout(10) // svg filters can take some times to render, I need to had some delay to make sure it's ready