Handling asynchronicity

As we can see when using APIs, the asynchronous nature of Ajax calls for a couple of creative approaches. In our Pokémon game, we used a loading spinner while calls were completing; this is an approach you've seen all around the modern web. Let's take a look at one example from the game:

toggleLoader() {
  /**
    * As this is visual logic, here's the complete code for this function
    */
  if (this.loader.style.visibility === 'visible' || 
  this.loader.style.visibility === '') {
    this.loader.style.visibility = 'hidden'
  } else {
    this.loader.style.visibility = 'visible'
  }
}

All this part of the code is doing is toggling the visibility of a layer that contains a spinning image. This is all in the CSS (as it's not technically an image, but rather a CSS animation). Let's look at how it's used:

getPokemon() {
    fetch('https://pokeapi.co/api/v2/pokemon?limit=1000')
      .then((response...