Бесшовный старт в Angular или как избавиться от пустоты при старте SPA приложения / Хабр

Белый экран при загрузке SPA — типичная боль. Пользователь открывает приложение, ждёт пока загрузится приложение, а экран пуст. А если качество связи оставляет желать лучшего а размер чанков не может похвастаться оптимизацией(да это отдельная тема для обсуждений, но все же)? Я часто сталкиваюсь с этим в реальных проектах и вот наконец то появилось время и силы сделать так, чтобы у пользователя никогда не было пустоты на экране.

Вместо кучи прелодеров на уровне компонентов я сделал единую заглушку в index.html, которая появляется сразу и скрывается только тогда, когда приложение действительно готово.

Что происходит при старте:

Обычно цепочка такая:

грузится HTML,
качаются JS-чанки,
запускается Angular,
улетает первый запрос на сервер,
рендерятся компоненты.

До инициализации Angular пользователь видит пустой экран. Прелодеры внутри компонентов появляются только после запуска фреймворка. В моем случае так же возникла необходимость рендера приложения после получения стартовых данных с сервера(рендер канвас холста и т.д., но не об этом). Нужно было перекрыть весь процесс.

Решение:

Я добавил блок прямо в index.html, который показывается мгновенно и содержит:

логотип/иконку,
текст,
спиннер,
блок ошибки с кнопкой «повторить��.

Вот упрощённый кусок HTML (полный код ниже):

<div class="app-loading">
  <div class="app-loading__logo"></div>
  <div id="loading-text" class="app-loading__text">Загрузка...</div>
  <div id="loading-spinner" class="app-loading__spinner"></div>
  <div style="display: none;" id="loading-error" class="app-loading__error">
    <div class="app-loading__error-icon">⚠️</div>
    <div class="app-loading__error-text"></div>
    <button class="app-loading__retry-btn">Попробовать снова</button>
  </div>
</div>

Стили — соответственно там же в index.html

Глобальное состояние: как я связал Angular и JS:

const NAMESPACE = '__TABLE_LOADING__';
window[NAMESPACE] = { 
  isAppLoaded: false,
  isTableReady: false,
  isLoading: true,
  hasError: false,
  errorMessage: null
};

Оптимизация:

Сначала я проверял состояние каждые 100 мс через setInterval(обычный пуллинг в деле). Это работало, но создавало лишнюю нагрузку: постоянные проверки, сравнения и потенциальные утечки памяти.

В финальной версии я заменил это на Proxy. Теперь заглушка реагирует только на реальные изменения состояния:

function createStateProxy(obj, callback) {
  return new Proxy(obj, {
    set(target, prop, value) {
      if (target[prop] === value) return true; // без лишних действий
      target[prop] = value;
      callback(target); // вызываю onStateChange только при изменении
      return true;
    }
  });
}

index.html — финальная версия(js + html):

<body>
  <div class="app-loading">
    <div class="app-loading__logo"></div>
    <div class="app-loading__text" id="loading-text">Загрузка игрового стола...</div>
    <div class="app-loading__spinner" id="loading-spinner"></div>
    <div class="app-loading__error" id="loading-error" style="display: none;">
      <div class="app-loading__error-icon">⚠️</div>
      <div class="app-loading__error-text"></div>
      <button class="app-loading__retry-btn" onclick="location.reload()">Попробовать снова</button>
    </div>
  </div>

  <table-root/>

  <script>
    const NAMESPACE = '__TABLE_LOADING__';

    (function () {
      const initial = {
        isAppLoaded: false,
        isTableReady: false,
        isLoading: true,
        hasError: false,
        errorMessage: null
      };

      let observerActive = true;

      function onStateChange(state) {
        if (!observerActive) return;

        if (state.hasError && state.errorMessage) {
          showError(state.errorMessage);
          return;
        }

        if (state.isAppLoaded && state.isTableReady && !state.isLoading && !state.hasError) {
          hideLoadingScreen();
        }
      }

      window[NAMESPACE] = createStateProxy(initial, onStateChange);

      function createStateProxy(obj, callback) {
        return new Proxy(obj, {
          set(target, prop, value) {
            if (target[prop] === value) return true;
            target[prop] = value;
            callback(target);
            return true;
          }
        });
      }

      function hideLoadingScreen() {
        observerActive = false;
        document.body.classList.add('app-loaded');
        setTimeout(() => {
          const loading = document.querySelector('.app-loading');
          if (loading) loading.remove();
        }, 300);
      }

      function showError(message) {
        document.getElementById('loading-text').style.display = 'none';
        document.getElementById('loading-spinner').style.display = 'none';
        document.getElementById('loading-error').style.display = 'flex';
        document.querySelector('.app-loading__error-text').textContent = message;
      }

      // На случай если что то пойдет не так, чтобы заглушка не зависла(в будущем скорее всего удалю за ненадобностью)
      const MAX_TIMEOUT_MS = 100 * 1000;
      const fallbackTimer = setTimeout(() => {
        if (observerActive) hideLoadingScreen();
      }, MAX_TIMEOUT_MS);

      const originalHide = hideLoadingScreen;
      hideLoadingScreen = function () {
        clearTimeout(fallbackTimer);
        originalHide();
      };
    })();
  </script>
</body>

Синхронизация состояния из angular:

В Angular-компоненте я обновляю глобальный объект по мере изменения состояния загрузки и рендера

private initializeGlobalLoadingState(): void {
  if (typeof window !== 'undefined' && (window as any).__TABLE_LOADING__) {
    (window as any).__TABLE_LOADING__.isAppLoaded = true;
  }

  effect(() => {
    const isTableReady = this.tableRenderer.isTableReady();
    const isLoading = this.controller.isLoading();
    const errorMessage = this.controller.errorMessage();
    const hasError = !!errorMessage;

    if (typeof window !== 'undefined' && (window as any).__TABLE_LOADING__) {
      const state = (window as any).__TABLE_LOADING__;
      state.isTableReady = isTableReady;
      state.isLoading = isLoading;
      state.hasError = hasError;
      state.errorMessage = errorMessage || null;
    }
  });
}

Чего получилось достичь:

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

Бесшовный старт в Angular или как избавиться от пустоты при старте SPA приложения