Отставание загрузки анимации в ожидании завершения сложных расчетов в интерфейсе

Question

Я создаю сайт-головоломку для некоторых друзей, и время от времени алгоритм генерации головоломки может занять приличное время (4-5 секунд для более сложных головоломок).

Я построилсервис для отображения анимации загрузки, когда приложение в настоящее время не принимает ввод пользователя, и прекрасно работает для асинхронных вызовов API.

Пример, где работает отлично:

this.loader.startLoadingAnimation(); // Indicate we are waiting
this.tunnel.startPuzzleTimer(GameID, Difficulty)
  .subscribe( (response) => {
    // Do something with response - removed for brevity
    this.loader.stopLoadingAnimation(); // Indicate we are done waiting
  });

Он работает точно так, как вы ожидаете, анимация воспроизводится с очень высокой частотой кадров и исчезает, когда контент готов.Однако у меня возникают проблемы, когда я пытаюсь использовать его следующим образом:

this.loader.startLoadingAnimation(); // Indicate we are waiting
this.puzzleService.generatePuzzle(GameID, Difficulty); // Generate board, CPU intensive!!
this.loader.stopLoadingAnimation(); // Indicate we are done waiting

На этот раз появляется анимация загрузки, но она работает со скоростью примерно 2 кадра в секунду.Очевидно, это вызвано дорогой операцией generatePuzzle(), но мне было интересно, есть ли какой-нибудь способ, возможно, использовать меньше ЦП и генерировать головоломку медленнее, и расставить приоритеты для отображения идеально плавной анимации загрузки.

Спасибо залюбая помощь.