How can I put the loading while waiting on render Reactjs

I just made a animated "loading.." using css but i want it to only exist when it's waiting for data to load/render.. any idea how I really dont know how im so new to this?...

this is the loading...

  <span className="Loader">
          <div className="Loader-indicator" >
            <h1>
              <span>Loading</span>
              <span className="Loader-ellipsis" >
                <span className="Loader-ellipsisDot">.</span>
                <span className="Loader-ellipsisDot">.</span>
                <span className="Loader-ellipsisDot">.</span>
              </span>
            </h1>
          </div>
        </span>