Показать загрузку пока выполняется код JS через промис
 

Добрый день!

Необходимо сделать, так чтобы пока выполняется JS код, пользователю показывалась гифка загрузки, после выполнения JS кода - загрузка скрывалась и показывались данные. Всё это пытаюсь реализовать через промис. Вот код:

function f_my(data){
	document.getElementById('div_loader_div_dannie').style.display = 'block';
	
	let promise = new Promise(function(resolve, reject){
		let dannie = '';
		
		for (j=0; j<100; j ++){
			for (i = 0; i < 100; i ++){
				dannie += '<div style="width:100%; height:50px; background:red; margin-bottom:10px; float:left;"></div>';
			}
		}

		resolve(dannie)
	});
	
	promise.then(result => f_obr(result));
}

function f_obr(result){
	document.getElementById('div_dannie').innerHTML = result;
	document.getElementById('div_loader_div_dannie').style.display = 'none';
}

Но при выполнении получаю длительно зависшую страницу, без соответствующего отображения gif загрузки. Прошу помочь с решением проблемы!

Тут все операции синхронные*, т.е. показ загрузки, рисование и скрытие загрузки происходят единомоментно. Возможно с некоторым подвисанием от того, что ты пытаешься нарисовать 10000 float элементов.

Добавление промиса не сделает магическим образом твой код асинхронным.

* then сработает в следующем таске, но на деле это ничего не меняет.