How to delay a react app from loading until a action is triggered?

Question

I am working on a web application project. The project consists of normal php web pages and an embedded react app. I have developed all the web pages and outsourced the react app section.

I have put the react app in an iframe.

• I want to delay the react app from uploading until everything on my web page is loaded.

This is because I am sending information in to the app via iframe.contentWindow.postMessage(). And I am using an eventlistener to get the information.

The problem I am experiencing is that react is loaded before the event is triggered. So my react act keeps reading an undefined source. So I want to delay it from loading until after either the web page is loaded or after the event is triggered.

• I cannot block the iframe from loading cause the iframe.contentWindow.postMessage() posts the information to the iframe on load. Can anyone show me how to delay the react app from loading until the post message is sent?

Thanks in advance guys

score 0 · Accepted Answer · answered May 21 '19 at 18:18

I would allow the React app to load on page load, but have it display a "loading..." spinner. Add a property to the React component called "isLoaded" which is initially set to false. When the data / web page is ready to render, set isLoaded to true and the React app will re-render with the actual content.

  constructor(props) {
    super(props);
    this.state = {
      isLoaded: false,
    }
  }

  componentDidMount() {
    // wait until the data is loaded, then set isLoaded to true
    window.addEventListener("someevent", function() {
      this.setState({isLoaded: true});
    }
  }

  render() {
    if (this.state.isLoaded) {
      return (
        // Actual Content
      )
    } else {
      // show loading spinner
    }
  }

You may need to work with your event listener to know when the iframe has sent it's postmessage. For instance, maybe there is a hidden element somewhere that is both aware of the postmessage and is listened to by the above React component.

Here's a post that gives more options on getting React to wait to render. React - Display loading screen while DOM is rendering?

How to delay a react app from loading until a action is triggered?

1 Answers1