React - Loading screen while DOM is rendering?

Question

I want to display the loading screen till the DOM is rendered. In my program. I am checking if there are devices then it should show the loading page till DOM is rendered else show no devices found.

But the page shows No devices found then after the DOM is rendered it shows the devices. How can I fix this and show the "Loading" message if there are devices before the DOM is rendered.

It takes time to render the devices as well. So I cannot check if there are devices - thats the reason it goes to No devices found first.

render() {
    const { devices } = this.props;

    if (this.state.isLoading) {
        return (
            <div>Loading!!!!!</div>
        );
    }
    if (devices && devices.length > 0) {
        return (
            <div> // Devices table will be displayed
            </div>
        );
    } else {
        return (
            <div>
                No Devices found
            </div>
        );
    }
}

You're checking loading only if your component was provided with an devices array with at least 1 element. You have to check what data is provided to this component from the parent component. EDIT: ok so you've edited the code. Is isLoading initialised with true when creating the class? — Auskennfuchs
Just for some extra info, showing No devices found should be first? What state management are you using? — Icepickle
I'm not sure what you mean with 'After the DOM is rendered', if you see content from the return then it's rendered. You need to show more code, how is isLoading defined? — Einar Ólafsson

ctg ctg · Accepted Answer · 2019-05-10T21:28:23

render() {
    const { devices } = this.props;

      if (devices && devices.length > 0) {
          return (
                <div> // Devices table will be displayed
                </div>
        );
       }else {
if(this.state.loading){                   //Not sure how you set the state
return ( <div>Loading...</div>)  
}

        return (
            <div>
                No Devices found
            </div>
        );
    }
}

React - Loading screen while DOM is rendering?

1 Answers