Load the component when all data has ready

angular2: how to load data before rendering the component?
angular component load order
react suspense data fetching
angular wait for component to load
angular call service before component load
angular load component only once
angular load static data on application load
react wait for data before render

I'm using React with Redux. In this example I have my class with mapStateToProps and mapDispatchToProps

class EnigmaPage extends Component {

    constructor(props){
        super(props);
    }

    componentDidMount() {
        this.props.authCheckState();
    }

    readUserData() {
        this.props.loadLevel(this.props.userId);
    }

    render(){
        return (
            <div className={classes.EnigmaPage}>
                <div className={classes.Header}>
                    <div>
                        <LevelInfo 
                            difficulty={this.props.level.difficulty}
                            level={this.props.level.level}
                            readUserData={this.readUserData()}
                        />

                    </div>
                </div>
            </div>
        )
    }

}

const mapDispatchToProps = dispatch => {
    return {
        authCheckState: () => dispatch(actions.authCheckState()),
        getLevel: () => dispatch(actions.getLevel()),
        loadLevel:(id) => dispatch(actions.loadLevel(id))
    };
}
const mapStateToProps = state => {
    return {
        userId:state.auth.user,
        level:state.level.level
    }
}

I wanna push to my component LevelInfo the values difficulty and level but these 2 data arrive from getLevel() that is an http request with delay. The page loads before receiving all the data from the http call. I'm looking a way to wait to load the component LevelInfo or reload the component when the data are all ready.

You need to tell your component that will wait for the data needed to render your Level component, so into your EnigmaPage component write as follow

render(){
    const { level } = this.props;
    if (!level) { return <LoadingComponentSpinner />; } // this will render only when level attr is not set, otherwise will render your `LevelInfo` component
    return (
        <div className={classes.EnigmaPage}>
            <div className={classes.Header}>
                <div>
                    <LevelInfo 
                        difficulty={this.props.level.difficulty}
                        level={this.props.level.level}
                        readUserData={this.readUserData()}
                    />

                </div>
            </div>
        </div>
    )
}

I hope it can help you.

Load the component when all data has ready, Load the component when all data has ready. load data before component angular react suspense react wait for data before render angular component load​  We will build an Angular application where we will call JSONPlaceHolder API to get post data and will show the data in the user-posts component. Here, we will make sure that my user-posts component will not load or display until all user posts data from API is ready to load or display.

We don't make our components wait, we let the initial rendering happens but render the target component with a conditional expression.

render() {
  return (
    <div className={classes.EnigmaPage}>
      <div className={classes.Header}>
        <div>
          {this.props.level && (
            <LevelInfo
              difficulty={this.props.level.difficulty}
              level={this.props.level.level}
              readUserData={this.readUserData()}
            />
          )}
        </div>
      </div>
    </div>
  );
}

So, here we are checking if this.props.level is defined. When it is undefined React does not render anything, after getting the data LevelInfo component is rendered. You can change conditional rendering logic. You can render a Loading component maybe instead of nothing. But, at the end of the day, you will render your component conditionally.

Load All Data Before Loading The Component View In Angular 6, It's preferable to pre-fetch data from the server so it's ready the moment the route is activated. This also allows you to handle errors before routing  If you using redux or some global store with subscription, create another store key next to your data, something like dataLoaded = false, then change it to to true when your data is ready. In component, use this state in render function, like so: if (!store.dataLoaded) return <div>No data</div>; return <MyDataRenderer/> Otherwise, if no subscription is used, consider Promises to refresh component state.

try to use conditional rendering:

isDataReady() {
    if(this.props.level.difficulty && this.props.level.level)
        return true;
    return false;
}

render(){
    return (
        <div className={classes.EnigmaPage}>
            <div className={classes.Header}>
                <div>
                {this.isDataReady() ? <LevelInfo 
                        difficulty={this.props.level.difficulty}
                        level={this.props.level.level}
                        readUserData={this.readUserData()}
                    />
             : <div> </div>}
                </div>
            </div>
        </div>
    );
}

in case your data is not ready you can display anything you want, for simplicity here I just added an empty <div>.

Data Science for Librarians, After data has been collected, information may be gathered, or extracted, from that After the transformation process, data is ready for the “loading” component of Even though ELT is speedier than ETL, not all destination systems have the​  The ready event is fired when the DOM is fully loaded and accesses to elements are safe. The load event, on the other hand, is fired after the DOM and all assets have loaded. The load event can be

Johuder Gonzalez has talked about the Spinner. The Material UI has a lot of examples, which is easy to apply. Please look the followings. Material UI Progress

Suspense for Data Fetching (Experimental) – React, ProfilePage')); // Lazy-loaded // Show a spinner while the profile is loading <​Suspense Suspense for Data Fetching is a new feature that lets you also use React retries rendering components that still need data until they're all ready. Note. data: { count: 0} Instead, a component’s data option must be a function, so that each instance can maintain an independent copy of the returned data object: data: function { return { count: 0} } If Vue didn’t have this rule, clicking on one button would affect the data of all other instances, like below:

Vue.js 2 Cookbook, Sometimes you need to load components while the app is already running. This can be because you have so many components that it will be too cumbersome to load all of them or maybe the shape of some component is ready. You want to load your component asynchronously only when you It will be too much data. Each of these components may trigger data fetching in their effects and lifecycle methods. This approach often leads to “waterfalls”. Fetch-then-render (for example, Relay without Suspense): Start fetching all the data for the next screen as early as possible. When the data is ready, render the new screen.

Patterns for data fetching in React, All the components render the same data and look the same. In this case, I chose to load the data for the first time in componentDidMount() and also method being called when the component is mounted and ready to go. Wait for Data Before Rendering Views in Angular 2 December 12, 2016 by Chris Sherman When you have an Angular view that combines static elements, such as a navigation bar and footer, with dynamic elements that depend on data from an HTTP request, the browser will initially render only the static elements.

JQuery UI Cookbook, More often than not, the dialog widget needs to load data from an API. That is, not all dialogs are composed of static HTML. Ideally, we would block the dialog from displaying until the components displayed by the dialog are ready. This is  The original target for this event is the Document that has loaded. You can listen for this event on the Window interface to handle it in the capture or bubbling phases. For full details on this event please see the page on the Document: DOMContentLoaded event.

Comments
  • Voted for the spinner example where i was lazy for my answer :)
  • Great one, you should always let the user know, what is happing with the app state, so spinner is a great manner to tell our user that we'll waiting for data :D
  • Sure. But life is too short to write a complete, detailed example in the middle of the night :D
  • @JohuderGonzalez thanks for your answer but in this case there are ever the spinner. I need to load my component LevelInfo when is ready. When I load the page, all the props is not ready and it load LoadingComponentSpinner. When is done stop the flow in this case.
  • @MarcoPestrin the Issue is that you are executing the loadLevel function into your LevelVomponent so execute that function in componentDidMount into your EnigmaPage component, that will do the trick
  • but in this case when all the props is ready the LevelInfo component will not load.
  • @MarcoPestrin, when a component's props changed React re-renders it. In this second render since you have the this.props.level prop, (so, the first condition is true) the expression goes the second part, hence your LevelInfo component is rendered.