React video loading in memory before rendering to screen

Since you have the autoplay attribute included, using the onplay event ought to work for this case. I've modified your original example to demonstrate:

componentDidMount() {  this.setState({isLoading: true})}render() {    const { isLoading } = this.state;    return (        <React.Fragment>            {isLoading && <CircularProgress />}            <video                loop                muted                autoPlay                src={WaveVideo}                preload={'auto'}                type={'video/mp4'}                className={classes.video}                ref={ref => this.headerVideo}                onLoadEnd={() => this.setState({isLoading: false})}>            </video>        </React.Fragment>    );}

So when this component is created it'll run the componentDidMount lifecycle function to set the initial loading indicator state, causing the spinner to render alongside the loading video. We, then, unset the loading indicator state once the video has begun playing on its own, which causes the spinner to no longer render.

EDIT:

I've since learned that the event you are binding in your example onloadeddata "is fired when the first frame of the media has finished loading". This neatly explains why you were seeing both events firing at once. The event you were intending to use was actually onloadend. I've included it in the example, above, replacing the original onplay handler.