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>
        );
    }
}

Answer 1

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>
        );
    }
}