Network Idle Listener

Отслеживает активные fetch и XMLHttpRequest с помощью PerformanceObserver и отправляет кастомное событие network-idle, когда все запросы завершены. Полезно для определения момента полной загрузки контента в SPA.

Исходный код

function useNetworkidleEvents() {
  let activeRequests = 0
  let idleTimeout = null

  // Функция для проверки состояния сети
  function checkNetworkIdle() {
    if (activeRequests === 0) {
      idleTimeout = setTimeout(() => {
        const event = new CustomEvent('network-idle')
        window.dispatchEvent(event)
      }, 500)
    }
  }

  // Настройка PerformanceObserver для отслеживания сетевых запросов
  const observer = new PerformanceObserver((list) => {
    list.getEntries().forEach((entry) => {
      if (entry.initiatorType === 'fetch' || entry.initiatorType === 'xmlhttprequest') {
        // Увеличиваем счетчик активных запросов
        activeRequests++
        clearTimeout(idleTimeout)

        // Уменьшаем счетчик активных запросов после завершения загрузки
        if (entry.duration > 0) {
          activeRequests--
          checkNetworkIdle()
        }
      }
    })
  })

  // Начинаем наблюдение за сетевыми запросами
  observer.observe({ entryTypes: ['resource'] })
}

useNetworkidleEvents()

// Обработка события network-idle
window.addEventListener('network-idle', () => {
  console.log('Network is idle')
})

// Остановка наблюдения при необходимости (например, при выходе из приложения)
// observer.disconnect();