How can I make the loading icon display during the save function call and then switch to the check mark icon after the function resolves instead of mocking it on a timeout?
function save() {
successMessage()
new Promise((resolve, reject) => {
setTimeout( function() {
resolve("Success!")
}, 250)
})
}
function createIcon(src, title) {
let img = document.createElement('img');
img.src = src;
img.className = 'icon'
img.style.display = 'none'
if (title != null) {
img.title = title
img.alt = title
}
if (src.indexOf('spinner') > 0) img.classList.add('spin')
return img;
}
function successMessage() {
let el = document.querySelector('button')
let check = this.createIcon("check.svg", "Updated")
let spinner = this.createIcon("spinner.svg", "Updating...")
if (el.childNodes.length === 1) {
el.appendChild(spinner)
el.appendChild(check)
}
check.style.display = 'none'
spinner.style.display = 'initial'
setTimeout(function() {
spinner.style.display = 'none'
check.style.display = 'initial'
}, 500);
}