JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
	<head>
	</head>

	<body>
		<button id='do'> Do long calc!</button>
		<div id='status'></div>
		<div id='result'></div>
	</body>
</html>

JavaScript

document.addEventListener('DOMContentLoaded', function() {
				document.querySelector('#do').onclick = function() {
					document.querySelector('#status').innerHTML = 'calculating...';
					// setTimeout(long, 0); // will block
          setTimeout(long, 1); // will not block
				};

				function long(){
				  let result = 0
				  for (let i = 0; i < 1000; i++) {
				    for (let j = 0; j < 1000; j++) {
				      for (let k = 0; k < 1000; k++) {
				        result += i + j + k;
				      }
				    } 
				  }
				  document.querySelector('#status').innerHTML = 'calculation done';
				  document.querySelector('#result').innerHTML = result.toString();
				}
			});