Cursor waiting and not pointer events

by Génesis García Morilla

HTML

<button>Get my IP</button>

CSS

body {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.wait {
  cursor: wait;
  user-select: none;
}

.wait * {
  pointer-events: none;
}

JavaScript

async function async_fetch(url) {
  let response = await fetch(url)
  if (response.ok) return await response.json()
  else throw new Error(response.status)
}

document.querySelector('button').onclick = () => {
  document.body.classList.add('wait')
  async_fetch('https://httpbin.org/ip')
    .then(data => {
      // Forced delay to see how our pointer's events stay blocked while waiting
      setTimeout(() => {
        document.body.classList.remove('wait')
        document.body.append(JSON.stringify(data))
      }, 3000)
    })
    .catch(error => {
      document.body.classList.remove('wait')
      alert(error)
    })
}