JSFiddle - React, Tailwind, and code Playground

HTML

<div id='wait'></div>

<button id='btn'>Submit</button>

<div id='log'>

</div>

CSS

#wait {
  width: 100%;
  height:120px;
  line-height:120px;
    background-color: black;
    color: #ccc;
    opacity: .6;
    display: block;
    font-size: 5em;
    text-align: center;
}
#log p{
 line-height:3px; 
}

JavaScript

var btn = document.getElementById('btn');
var log = document.getElementById('log');

var delay;
function startDelay(){
	delay = setTimeout(w, 3000);
}
function resetDelay(){
	log.innerHTML = log.innerHTML + '<p>resetting</p>';
	clearTimeout(delay);
}

function w(){
    var wait = document.getElementById('wait');
    wait.innerHTML = 'DONE';
    log.innerHTML = log.innerHTML + '<p>DONE</p>';
}

btn.addEventListener('click', function (e){
    var wait = document.getElementById('wait');
    
    wait.innerHTML = 'Waiting...';
    
    resetDelay();
    startDelay();
    
    // Block the form from submitting.
    e.preventDefault();
});