JSFiddle - React, Tailwind, and code Playground

HTML

<input type="button" value="hello unstoppable gif" onclick="LoadThisCrap()" />
<img id="loading_gif" src="https://67.media.tumblr.com/026d8c27cd8e4c589bfaba180b233d41/tumblr_nw5i6uiY7d1r9xrggo3_400.gif"></img>
<div id="progress"></div>

CSS

#loading_gif {
  width: 50px;
  height: 50px;
  display: none;
}

#progress {
  height: 300px;
  overflow-y: scroll;
}

JavaScript

var busy = false;

function LoadThisCrap()
{
	document.getElementById("progress").innerHTML = "";
	document.getElementById("loading_gif").style.display = "block";
  busy = true;
  AsyncLoop(0, 1000);
  BusyCheck();
}

function AsyncLoop(i, lastLoop) {
  setTimeout(function () {
    if (i < lastLoop) {
    	var progressElement = document.getElementById("progress");
      progressElement.innerHTML += "iterator " + i + "<br />";
      progressElement.scrollTop = progressElement.scrollHeight;

      i++;
      AsyncLoop(i, lastLoop);
    }
    else {
    	busy = false;
    }
  }, 0);
}

function BusyCheck() {
setTimeout(function () {
	if (!busy) {
  	alert('goodbye gif :(');
  	document.getElementById("loading_gif").style.display = "none";
  }
	else {
  	BusyCheck();
  }
}, 100);
}