Lazy loading

Lazy loading is the last piece of our PRPL puzzle and is the process of using our application's idle time to load the rest of the JavaScript.

If you yarn deploy our application and navigate to the Network tab in DevTools, you'll see something similar to the following:

We load our main file and then whatever chunk is relevant to the current URL, but then we stop.

We're not loading the other routes during the idle time of our application! We need some way to trigger that loading process as soon as the initial route rendering is done, as soon as the App has mounted.

I think you know where this is going. In the componentDidMount method of App, we simply need to call our three loading methods:

componentDidMount() {
    this.notifications = new NotificationResource(
      firebase.messaging(),
      firebase.database()
    );
    firebase.auth().onAuthStateChanged(user => {
      if (user) {
        this.setState({ user });
        this.listenForMessages();
        this.notifications...