Handling iframe loading in React

In my most recent project, I needed to utilize a few iframes. Unfortunately, iframes can take a while to load. It’s a pretty bad user experience if an iframe pops onto the screen after a few seconds. Today, I’ll show you how I brought in simple loading animations in React while my iframes load.

For this example we’ll look at my rsvp component. This loads an external google form iframe. First, we’ll add a state of loading to the component that starts out as true.

class Rsvp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true
    };
  }
render() {
    return (
      <div className="container rsvp-wrapper">
      </div>
    );
  }
}

Then, we’ll create a hideSpinner function that changes the loading state to false.

class Rsvp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true
    };
  }
hideSpinner = () => {
    this.setState({
      loading: false
    });
  };
render() {
    return (
      <div className="container rsvp-wrapper">
      </div>
    );
  }
}

Then, we’ll add the react-spinkit package. This is a great CSS animations package I’ve used in many projects. We’ll set a ternary that loads the spinner while the iframe is loading.

class Rsvp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true
    };
  }
hideSpinner = () => {
    this.setState({
      loading: false
    });
  };
render() {
    return (
      <div className="container rsvp-wrapper">
        {this.state.loading ? (
          <Spinner
            className="loading text-center"
            name="three-bounce"
            color="white"
            fadeIn="none"
          />
        ) : null}
      </div>
    );
  }
}

Finally, we’ll add the iframe that will call the hideSpinner function onLoad.

class Rsvp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true
    };
  }
hideSpinner = () => {
    this.setState({
      loading: false
    });
  };
render() {
    return (
      <div className="container rsvp-wrapper">
        {this.state.loading ? (
          <Spinner
            className="loading text-center"
            name="three-bounce"
            color="white"
            fadeIn="none"
          />
        ) : null}
        <iframe
          src="..."
          width="100%"
          height="700"
          onLoad={this.hideSpinner}
          frameBorder="0"
          marginHeight="0"
          marginWidth="0"
        />
      </div>
    );
  }
}

There we go! We have a clean loading animation for our iframe!