Ternary operator in React stuck in first condition only on mobile

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 shows 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 shows the second condition as desired, on mobile devices it doesn't get past the first condition.

setting the loading value once data is loaded

  const [mylat, setLat] = useState("");
  const [mylong, setLong] = useState("");
  const [loading, setLoading] = useState(true);

  window.onload = async () => {
    const coords = await getCoords(() => {
      return;
    })
    setLat(coords.lat);
    setLong(coords.long);
    setLoading(false);
  }

return value

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

Per suggestion from @ataman comment I used useEffect() instead of winow.onload and it works on both web browsers, PC and mobile.