Async not awaiting properly

Question

I know this has been asked loads of times but none of the answers I've found so far seem to apply to my particular issue. I'm trying to create an async function that also executes a bunch of axios calls inside of it and then once all of them are finished it does something else.

I thought wrapping everything in an async function and then awaiting that would do the trick, but it hasn't seemed to work.

let gamesFound = 0;

  mainFn();

  async function mainFn() {
    await loader();
    if (gamesFound == 0) {
      document.getElementById("indexH1").innerHTML = "Oops! We didn't find any data.";
      document.getElementById("introLine").innerHTML = "It doesn't look like there are any games with that time control in the date range, please try changing your filters.";
      document.getElementById("loadingCheck").style.display = "none";
    }
  }

  async function loader() {

    axios.get(url1)
      .then((response) => {
        // Some synchronous code with the response
        axios.get(url1)
          .then((response) => {
            // Some more synchronous code with the response of this
              axios.get(archive)
                .then((response) => {
                  gamesFound++;
                .catch((error) => {
                })
            }
          })
          .catch((error) => {
          })
      })
      .catch((error) => {
      })

  }

The first part seems to work fine but actually loader() seems to run after the if (gamesFound ==0) condition gets evaluated.