Loading Visual

When you try to sign in, create a user, or reset your password, a request is sent to Firebase. Usually,​ that request is pretty fast, but no matter the speed​​, let's give our users some feedback by showing a loading visual to them which also enhances the UI/UX.

Loading Visual HTML #

Press + to interact
<!-- 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 #

Press + to interact
// 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

...

Get hands-on with 1400+ tech skills courses.