I have an application in React that I am using a loader placeholder on until my data is pulled via promises and async functions.

Using the following code works properly on any computer but when loading on a mobile device it show’s the loader only and does not move past it when the data is loaded.

Is there something about mobile processing of ternary operations that causes this?

Here is the code I am using that works fine on a pc web browser and show’s the second condition as desired, on mobile devices it doesn’t get past the first condition.

return (
    <div className="App">
      { loading ? (

        <header className="App-header">
          <div className="masterLoader">
            {MyLoader()}
          </div>      
        </header>

      ) : (
        
        <header className="App-header">
          <MyC msg={myMsg} icon={myIcon} />
          <div className="mapWrapper">
            <PostMap lat={mylat} long={mylong} />
          </div>
          <Posts ip={ip} mlat={mylat} mlong={mylong} />
          <div id="logo"></div>
          <span id="page-bottom"></span>
        </header>

      )}
    </div>
  )