Gatsby JS加载指示器自定义及禁用方法技术咨询

禁用默认加载指示器 #

有两种简单方法可以禁用Gatsby的默认加载指示器：

• 方法一：直接隐藏DOM元素
  在gatsby-browser.js中添加以下代码，路由切换时隐藏默认指示器：

exports.onRouteUpdate = () => {
  const defaultIndicator = document.getElementById("gatsby-loading-indicator");
  if (defaultIndicator) defaultIndicator.style.display = "none";
};

• 方法二：覆盖页面包裹逻辑
  在gatsby-browser.js和gatsby-ssr.js中导出wrapPageElement，使用极简包裹组件移除默认指示器的渲染逻辑：

import React from "react";

export const wrapPageElement = ({ element }) => <>{element}</>;

自定义加载指示器 #

如果想替换默认样式，按以下步骤实现：

1. 编写自定义加载组件（示例：src/components/CustomLoader.js）：

import React from "react";

const CustomLoader = () => (
  <div id="custom-loader" style={{
    position: "fixed",
    top: 0,
    left: 0,
    width: "100%",
    height: "3px",
    background: "#FF5722",
    transform: "translateX(-100%)",
    animation: "slide 1.2s infinite ease-in-out"
  }}>
    <style jsx global>{`
      @keyframes slide {
        0% { transform: translateX(-100%); }
        100% { transform: translateX(100%); }
      }
      #custom-loader.hidden { display: none; }
    `}</style>
  </div>
);

export default CustomLoader;

2. 在gatsby-browser.js中监听路由状态，控制自定义加载器的显示（和默认逻辑一致，1秒后显示）：

import React, { useState, useEffect } from "react";
import CustomLoader from "./src/components/CustomLoader";

export const wrapRootElement = ({ element }) => {
  const [isRouting, setIsRouting] = useState(false);

  useEffect(() => {
    let timer;
    const startLoading = () => {
      setIsRouting(true);
      timer = setTimeout(() => {
        document.getElementById("custom-loader")?.classList.remove("hidden");
      }, 1000);
    };

    const endLoading = () => {
      setIsRouting(false);
      clearTimeout(timer);
      document.getElementById("custom-loader")?.classList.add("hidden");
    };

    window.addEventListener("gatsby-route-change-start", startLoading);
    window.addEventListener("gatsby-route-change-complete", endLoading);
    window.addEventListener("gatsby-route-change-error", endLoading);

    return () => {
      window.removeEventListener("gatsby-route-change-start", startLoading);
      window.removeEventListener("gatsby-route-change-complete", endLoading);
      window.removeEventListener("gatsby-route-change-error", endLoading);
      clearTimeout(timer);
    };
  }, []);

  return (
    <>
      <CustomLoader className="hidden" />
      {element}
    </>
  );
};

3. 同步到gatsby-ssr.js：将上述wrapRootElement代码复制到gatsby-ssr.js中，保证服务端渲染的一致性。

内容的提问来源于stack exchange，提问作者Vic