<Image/> component

[JonnyBurger]

Using normal HTML tags has the disadvantage that the image might not yet be loaded when Remotion is ready. I am thinking of adding a simple component which will hook into the onLoad event and wait for all images to be loaded using delayRender.

You can subscribe to this issue to follow the progress.

Solution for now:

import {useCallback, useState} from 'react';
import {continueRender, delayRender} from 'remotion';

export const Img: React.FC<Omit<
	React.DetailedHTMLProps<
		React.ImgHTMLAttributes<HTMLImageElement>,
		HTMLImageElement
	>,
	'onLoad'
>> = (props) => {
	const [handle] = useState(() => delayRender());

	const onLoad = useCallback(() => {
		continueRender(handle);
	}, [handle]);

	return <img {...props} onLoad={onLoad} />;
};

[pomber]

Maybe iframes have a similar problem? They consistently disappear in some frames. Here's an example.

[JonnyBurger]

Good point! Let's also make an IFrame component then.

Can you try if this <IFrame> component solves your problem?

import {useCallback, useState} from 'react';
import {continueRender, delayRender} from 'remotion';

export const IFrame: React.FC<Omit<
	React.DetailedHTMLProps<
		React.IframeHTMLAttributes<HTMLIFrameElement>,
		HTMLIFrameElement
	>,
	'onLoad'
>> = (props) => {
	const [handle] = useState(() => delayRender());

	const onLoad = useCallback(() => {
		continueRender(handle);
	}, [handle]);

	return <iframe {...props} onLoad={onLoad} />;
};

I'll then add it to Remotion Core, add documentation and improve DX by adding an ESLint Rule to the Remotion plugin!

[pomber]

Awesome, that fixed the iframe flickering, thanks!

For other cases, maybe you can hide the handle, delayRender, and continueRender details inside one hook:

function useResumer() {
  const [handle] = useState(() => delayRender());

  const resumeRender = useCallback(() => {
    continueRender(handle);
  }, [handle]);

  return resumeRender;
}

or something like that.

[jeetiss]

Hey @JonnyBurger awesome project!

I think that suspense can help with this issue!

We can create custom suspense catcher and delayRender inside, like this

import {continueRender, delayRender} from 'remotion';

class VideoSuspense extends Component {
  constructor () {
    this.state = {
      loading: false
    }
  }
  
  componentDidCatch(promise) {
    if (isPromise(promise)) {
      this.setState({ loading: true })
      delayRender()
      promise.then(() => {
        this.setState({ loading: true })
        continueRender()
      })

    } else {
      throw promise
    }
  }

  render () {
    return this.state.loading ? null : this.props.children
  }
}



// root

<VideoSuspense>
  <Video/>
</VideoSuspense>

it should be better, because we don't need to wrap components that already support suspense with remotion delayRender/continueRender, and can use existed ones

what do you think about that? I can help with implementation

[JonnyBurger]

@jeetiss If that is possible using Suspense, then that's definitely preferrable!

But how does it work? Where does that promise come from? How do we hook into the onLoad function of img, iframe component?

[JonnyBurger]

Since a lot of people are affected, I am going ahead with the original plan and will merge #32. There is now also an ESLint rule enabled which will warn you if you use the native or <iframe> component!

[JonnyBurger]

Fixed by #32

[jeetiss]

@JonnyBurger, yes ofc! i am going to open new issue for suspense

But how does it work?

I'm not the best explainer) super simple scheme:

• Component loads some resource and throws a promise
• ErrorBoundary catch this promise and wait until it resolves and continue render

Where does that promise come from?

Components throw them:

• https://github.com/vercel/swr/blob/master/src/use-swr.ts#L801
• https://github.com/mbrevda/react-image/blob/master/src/useImage.tsx#L80
• https://github.com/jaredpalmer/the-platform/blob/master/src/Img.tsx

iframe component?

Iframe component is not so trivial for suspense, but can be implemented with hacks:
https://gist.github.com/threepointone/e73a87f7bbbebc78cf71744469ec5a15

Suspense is still experimental, but react community have a lot components that supports this feature
So i think it fit great for remotion