Search⌘ K
AI Features
Home
Courses
Full-Stack Web Applications with Firebase

Loading Visual

Explore how to implement loading visuals in Firebase Authentication workflows. This lesson guides you through creating and integrating loading animations triggered during submit events, enhancing feedback while managing user sign-in and sign-out. By the end, you'll understand how to synchronize loading states with Firebase responses to create a smoother user interface experience.

We'll cover the following...

Loading Visual HTML

HTML
<!-- Loading visual cue -->
<div id="loading-outer-container">
  <div id="loading-inner-container">
    <div id="loadspin">
      <div id="circle1"></div>
      <div id="circle2"></div>
    </div>
  </div>
</div>

Create the loading Function

Javascript (babel-node)
// Function to hide and show the loading visual cue
loading = (action) => {
  if (action === 'show'){
      document.getElementById('loading-outer-container').style.display = 'block'
  } else if (action === 'hide'){
      document.getElementById('loading-outer-container').style.display = 'none'
  } else {
      console.log('loading error')   
  }
}

Modify Each Form Submit Event Listener

Invoke loading('show')

We invoke the loading('show') function as the submit event happens. ...