Changing style property while js code is running

Question

I want to show a hint "CALCULATING..." while my script (see below) is doing some heavy calculations. But it doesn't work as I hoped because visibility of the hint is not changed till calculations are completed. How to fix this code to make want I want?

let result = document.getElementById("result");
let hint = document.getElementById("hint");
let sum = 0;
hint.style.visibility = "visible";
for (let i = 1; i <= 123456789; i++) sum += i;
result.innerHTML = sum;
hint.style.visibility = "hidden";

<div id="result">0</div>
<div id="hint" style="visibility: hidden">CALCULATING...</div>