way to prevent lag between conditional render svelte

Question

In my svelte app, I have a conditional statement that goes something like this. "If the video source exists, render the Video component, else always render a default image". I am finding that when the video is about to load, the default image goes away and there is a blank screen for like 1-3 seconds. Is there a way to prevent this? I don't want this "lag". I only want the image to disappear when the video is actually ready and can instantly show.

ps: the videosrc is being called from graphql schema if that matters

        {#if videoSrc}
            <Video src={videoSrc}/>
        {:else}
            <img alt={imageSrc} src={imageSrc} />
        {/if}

Answer 1

I would probably combine the placeholder with the video component, this would make it easier to combine the states "not having a source at all" and "not having loaded the source yet".

Once you have a source, you can set it on a video element and still visually hide it while listening for events like canplay or loadeddata, to only show the player then.