Индикаторы загрузки страниц

В современных одностраничных приложениях (SPA) пользовательский опыт во многом зависит от того, насколько быстро и информативно отображается переход между страницами. В библиотеке Navigo для маршрутизации URL важно не только управлять состоянием маршрутов, но и корректно показывать индикаторы загрузки при асинхронных действиях, таких как запросы к API или динамическая подгрузка контента.

Основные концепции индикаторов загрузки

Индикатор загрузки — это визуальный элемент, сигнализирующий о том, что данные или компоненты страницы находятся в процессе загрузки. В контексте Navigo индикаторы часто используются:

  • Перед вызовом асинхронной функции в обработчике маршрута.
  • При динамическом импорте модулей через import() или загрузке HTML-фрагментов.
  • Для блокировки пользовательского взаимодействия до завершения загрузки данных.

Ключевой момент: Navigo не предоставляет встроенных компонентов индикаторов, но позволяет интегрировать их с обработчиками маршрутов, используя JavaScript и CSS.

Структура обработчика маршрута с индикатором

Простейший паттерн выглядит следующим образом:

import Navigo from 'navigo';

const router = new Navigo('/', { hash: true });

function showLoader() {
    document.getElementById('loader').style.display = 'block';
}

function hideLoader() {
    document.getElementById('loader').style.display = 'none';
}

router.on('/users', async () => {
    showLoader();
    try {
        const response = await fetch('/api/users');
        const data = await response.json();
        renderUsers(data);
    } catch (error) {
        renderError(error);
    } finally {
        hideLoader();
    }
}).resolve();

Объяснение ключевых моментов:

  • showLoader() и hideLoader() управляют отображением индикатора загрузки.
  • async/await обеспечивает корректное ожидание завершения асинхронного запроса.
  • finally гарантирует скрытие индикатора даже в случае ошибки.

Интеграция с динамическим импортом модулей

Для больших SPA целесообразно подгружать страницы по мере необходимости. Индикаторы помогают избежать ощущения “замерзания” интерфейса:

router.on('/profile', async () => {
    showLoader();
    try {
        const module = await import('./pages/profile.js');
        module.renderProfile();
    } finally {
        hideLoader();
    }
}).resolve();

Здесь import() возвращает промис, и индикатор остаётся активным до полной загрузки модуля.

Использование глобального события маршрутизации

Иногда полезно централизовать показ индикатора для всех маршрутов. В Navigo можно использовать router.hooks:

router.hooks({
    before: (done, params) => {
        showLoader();
        done();
    },
    after: () => {
        hideLoader();
    }
});

Пояснения:

  • before выполняется перед обработкой маршрута, вызывается с колбэком done.
  • after срабатывает после завершения навигации, скрывая индикатор.
  • Такой подход снижает дублирование кода в отдельных обработчиках маршрутов.

Продвинутые техники управления индикатором

  1. Дебаунс задержки Чтобы индикатор не моргал при очень быстрой загрузке, можно использовать минимальную задержку:
function showLoaderWithDelay(delay = 200) {
    const loader = document.getElementById('loader');
    loader.timeoutId = setTimeout(() => {
        loader.style.display = 'block';
    }, delay);
}

function hideLoaderWithDelay() {
    const loader = document.getElementById('loader');
    clearTimeout(loader.timeoutId);
    loader.style.display = 'none';
}

  1. Прогресс-бар вместо простого спиннера Для длительных операций можно отображать прогресс в процентах, обновляя значение по мере получения данных с сервера.

  2. Комбинирование с состоянием приложения В фреймворках, где используется состояние (например, через Redux или Zustand), индикатор может быть привязан к состоянию загрузки, а Navigo лишь переключает маршруты.

Практические рекомендации

  • Всегда использовать try/finally для скрытия индикатора, чтобы исключить зависание интерфейса.
  • Централизованный подход с router.hooks удобен для больших приложений.
  • Минимальная задержка показа индикатора улучшает визуальное восприятие при быстрых загрузках.
  • При динамическом импорте модулей или ленивой подгрузке страниц индикатор помогает пользователю понять, что приложение работает корректно.

Визуальная интеграция

Индикатор можно реализовать через CSS:

#loader {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 4px;
    background-color: #3498db;
    animation: loading 1s linear infinite;
}

@keyframes loading {
    0% { transform: scaleX(0); }
    100% { transform: scaleX(1); }
}

Такой индикатор не блокирует контент, но даёт визуальный сигнал о загрузке страницы.

Эти техники обеспечивают плавный переход между маршрутами, информативность интерфейса и корректное управление асинхронными операциями при работе с Navigo.

Оглавление