/* Make sure nothing inside buttons can send click events so we can catch button clicks with delegated events. */
button * {
  pointer-events: none;
}

/* Just a really naive css example to swap the button contents with the spinner. Bring your own spinner & styles. */
.loading {
  opacity: 0.5;
}
/*
.loading span {
  display: none;
}
*/
/* Side note: I'm using opacity here to make the button look disabled. But you probably shouldn't set disable=true for the button on submit, even to prevent multiple clicks. There could be a server error, network problem or whatever. The user should be able to try to submit the form again any time without reloading the page. Also remember to have screen reader accessible text on your spinner. Take care of accessiblity! */

#loading-mask {
  position: fixed;
  z-index: 1051;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background-color: rgba(200, 200, 200, 0.8);
}

#loading-spinner {
  display: flex;
  align-items: center;
  height: 100%;
}
#spinner {
  margin: 0 auto;
  display: block;
}