This is my current scenario, My homepage pose of multiple ponents with an HTTP request. Is it possible to display the page if only when all of my ponents finish their HTTP request?

Thanks!

P.S. I have no codes to show yet since im just in my planning stage on how will I developed the web app.

This is my current scenario, My homepage pose of multiple ponents with an HTTP request. Is it possible to display the page if only when all of my ponents finish their HTTP request?

Thanks!

P.S. I have no codes to show yet since im just in my planning stage on how will I developed the web app.

• javascript
• reactjs

Share Improve this question Follow asked Dec 5, 2016 at 16:12 Sydney LoteriaSydney Loteria 10.5k2121 gold badges6262 silver badges7373 bronze badges 6

• 1 I usually have a div that takes up the whole viewport as a loading screen. It has absolute positioning, and has a higher z-index than the rest of the page. When the http calls are finished, you can hide the div with the final callback – James Cootware Commented Dec 5, 2016 at 16:26
• But my problem is how can I detect if all(multiple) http calls are finished. I can do this if the page has only one http call but in my case since my homepage are breakdown into multiple ponent with http calls in each ponent. I can't think of ways on how to do it. – Sydney Loteria Commented Dec 5, 2016 at 16:31
• You could use the observer pattern . Basically, you have one object that is being notified each time the http response is finished. Once it has been notified enough times (based on a list or simple count), it can reveal the page – James Cootware Commented Dec 5, 2016 at 16:47
• Some the new frameworks like angular 2 or aurelia have that pattern built in ready to go. – James Cootware Commented Dec 5, 2016 at 16:49
• I'd challenge you to consider whether this is a good idea. I think a better user experience is to load the page right away with some loading indicator (spinner, etc) or dummy content (think modern facebook posts) – azium Commented Dec 5, 2016 at 16:56

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 5

Since your app is not coded yet, you can adopt better ponent structure. These are approaches that i have seen or implemented.

1. No global Loader needed in the first place -

If each of your ponents can handle rendering even before data loaded, like use of a App Shell architechture as shown below. a loading shell of a facebook post would look like
[![enter image description here][1]][1] [1]: https://i.sstatic/hBbTY.gif Code

    class Post extends React.Component {
      render() {
        return !this.props.isLoading ? (
          <div className="post">...</div>
        ) : (
          <div className="post-shell"></div>
        ); 
      }
    }

2. Global loader

Code

    class App extends React.Component {
      render() {
        return !this.props.isLoading ? (
          <RootComponent {...props}>
        ) : (
          <Loader />
        );
      }
    }

where Loader ponent is an absolutely positioned loading icon/content. RootComponent is only mounted when data is loaded so that all props are having required data.

many projects don't have the luxury to the former as the ponents are not written with corresponding shells. but since you are not constrained by time. The first approach gives the best UX.