How to add loading indicator when video is loading?

[bennik88]

Problem
I want to show a loading indicator as long as the video is loading.
Is there any workaround for now?

What I've tried but for sure can't work because of the architecture:

 {loading ? (
          <div
            style={{
              width: 210 * scaleImageFactor,
              height: 90 * scaleImageFactor,
            }}
          >
            ... Loading
          </div>
        ) : (
          <Vimeo
            video={project.vimeoId}
            width={210 * scaleImageFactor}
            height={90 * scaleImageFactor}
            responsive={true}
            onLoaded={() => setLoading(false)}
          />
        )}

Potential Solution
A prop like loadingOverlay={<div><p>...loading</p></<div> which accepts an JSX.Element as a loading placeholder for the video.

[goto-bus-stop]

the vimeo element must be in the DOM for the video to load. Your approach can probably work, if you keep the vimeo component mounted unconditionally:

    <>
       {loading ? (
          <div
            style={{
              width: 210 * scaleImageFactor,
              height: 90 * scaleImageFactor,
            }}
          >
            ... Loading
          </div>
        ) : null}
        <Vimeo
          video={project.vimeoId}
          width={210 * scaleImageFactor}
          height={90 * scaleImageFactor}
          responsive={true}
          onLoaded={() => setLoading(false)}
        />
    </>

Then you can use CSS to put your loading overlay on top of the video. you would need to call setLoading(true) yourself whenever you change the video ID.

[bennik88]

I see what you want to achieve. So you're saying there was no thought involved yet to show a loading screen as long as the video is loading? As I'm seeing big layout changes when the video is loaded as there is no placeholder meanwhile. *Thank you for your fast answer!

[goto-bus-stop]

So you're saying there was no thought involved yet to show a loading screen as long as the video is loading?

well, I did think about it and concluded that this library should not have that functionality. but it should provide the events necessary so you can implement it yourself, and my previous reply is just a suggestion of how you might achieve it. If more events are needed that are provided by the vimeo SDK then the library should provide access to those.