I have a function doing some calculations that takes about 2-3 seconds. While that fuction runs, I want to display a loader onto the page, until the function finishes. However, the loader gets inserted to the page not until the function finished. The function inserts a canvas that shows the results once it finished, maybe thats causing a problem? Because when I replace that function with a setTimeout, I dont have any problems. I also replaced it with a function that logs "HI" 10000 times, but I get the same effect as with setTimeout; the loader displays correctly. Used code:

var header = document.querySelector(".header");

var loader = document.createElement("div");
loader.className = "loader";

header.append(loader);
 
var master = new CalculatingMaster();
master.calculateAndDisplayResults();