Функция формирования рекурсивной таблицы, которая ожидает загрузки страницы перед каждым шагом

Question

Я пытаюсь выяснить, как объединить все эти вещи в одну и ту же функцию:

1. Массив объектов, разделы которого создаются с помощью трудоемкой функции
2. Загрузка DOM перед каждой попыткой загрузки следующего раздела объектов массива

Я пробовал Promise, рекурсивные функции, в моих лучших возможностях, чтобы не преобладать.Вот код, которым я манипулирую:

showLoader();

      var preArray = new Array();
      var subjects = scrapeSubjects();

      function next(subject, prearray) {
          if (subject.length) {
            //Writes an element specifying the current section being loaded for the user on a loading page
              writeToLoader(subject[0]);
              $( document ).ready( function() { next(subject); });
              prearray = prearray.concat(pullData(subject.shift()));
          }
      };
preArray = next(subjects, preArray);

      var array = stripNonRooms(preArray, roomsArray);
      localStorage.setItem('data', JSON.stringify(array));
      //hides the loader when it is complete
      var loader = document.getElementById("loader");
      loader.style.display = "none";

Могу ли я что-нибудь сделать, чтобы показать пользователю секцию, которая загружается в данный момент, пока она загружается?