🔃 Loading Spinner

Show a loading indicator while the app is fetching data

What state should a button typically be in when the app performing an async operation?

Let’s add a loading indicator to our UI that replaces the text inside the submit button.

Loading Code

function showSpinner() {
  const button = document.querySelector('button');
  button.disabled = true;
  button.innerHTML = 'Dreaming... <span class="spinner">🧠</span>';
}

function hideSpinner() {
  const button = document.querySelector('button');
  button.disabled = false;
  button.innerHTML = 'Dream';
}

Questions? Let's chat

Open Discord