В последнее время я искал некоторые приемы, чтобы добавить настраиваемый счетчик загрузки на веб-сайт Gatsby без использования плагина nProgress, который Gatsby предоставляет в документации, не используя файл gatsby-browser.js и не вызывая API-интерфейсы браузера, такие как onRouteUpdate и onInitialClientRender, после попытки нескольких подходов к лучший, который работает так, как ожидалось, сделан хуком useEffect, так что вот как это сделать:

Подготовьте свой svg спиннер:

вы можете выбрать один из примеров, представленных в этой ссылке, скопировать его код и создать файл loadingSpinner.svg внутри вашего файла ресурсов и вставить туда код.

Создайте файл Loader.js :

в этом файле импортируйте свой счетчик svg и создайте компонент загрузчика:

import loadingSpinner from "assets/loadingSpinner.svg"

function Loader (){
  return (
    <div style={{
         position : "fixed",
         display : "flex",
         width : "100vw",
         height : "100vh",
         justifyContent : "center",
         alignItems : "center",
         zIndex : 600,
         backgroundColor : "#FFF"
         }}
    >
        <img src={loadingSpinner} 
             alt="loader" 
             width="150px" 
             height="150px"
        />
    </div>
  )
}
export default Loader

Примечание. Цвет и размер счетчика можно изменить в файле svg.

Добавьте загрузчик в файл html.js:

импортируйте компонент Loader в файл html.js и поместите его в тег div чуть ниже открывающего тега body, и присвойте этому div идентификатор:

<div id="full-page-loader">
       <Loader />
</div>

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

Управляйте компонентом Loader:

в файле Layout.js получите компонент загрузчика по его идентификатору внутри хука useEffect и удалите его, когда файл макета будет обработан, точно так же:

useEffect(() => {
    try {
      const element = document.getElementById("full-page- 
      loader")
      if (element) element.parentNode.removeChild(element)
    } catch(error) {
      console.log(error)
    }
  })

Примечание: мы должны использовать блок try catch, поэтому мы можем тестировать наш код во время его выполнения, используя только обычный оператор if, который не будет работать, и он вернет свойство нулевой ошибки либо для метода parentNode, либо для метода removeChilde.