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 cueloading = (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.