В последнее время я искал некоторые приемы, чтобы добавить настраиваемый счетчик загрузки на веб-сайт 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
.