javascript - 在页面入口处仅显示一次覆盖(不是路线更改)。如何？

Question

所以我尝试在我的 gatsby 网站上覆盖大约一秒钟，让它在后面加载正确的断点。我怎样才能做到这一点？

所以我设置了一个 Interval 和一些 State 来加载 Overlay 并让它在一个时间间隔后消失。但是每次页面重新加载覆盖后问题再次出现。我没有像 redux 这样的状态管理，我需要 Overlay 仅在每次刷新或从外部链接进入后出现，而不是单击内部链接。

我试过 useEffect 只在挂载上渲染，但这并不能解决问题，因为内部链接更改会触发重新挂载

我发现我可以在 InitialClientRender 上使用浏览器 API。但我不明白如何在 gatsby-browser.js 之外访问其中生成的值。总的来说，我在理解如何使用这些 API 时遇到问题。

自定义钩子(Hook)

export function useInterval(callback, delay) {
  const savedCallback = useRef()

  // Remember the latest callback.
  useEffect(() => {
    savedCallback.current = callback
  }, [callback])

  // Set up the interval.
  useEffect(() => {
    function tick() {
      savedCallback.current()
    }
    if (delay !== null) {
      let id = setInterval(tick, delay)
      return () => clearInterval(id)
    }
  }, [delay])
}

布局.js

let [loadingIndicator, setLoadingIndicator] = useState(true)
const delay = 500

useInterval(() => {
  setLoadingIndicator(false)
}, delay)

因此，预期结果将是一种方式，告诉初始客户端渲染设置一个状态，该状态告诉要渲染覆盖层，并且在此渲染之后，状态应更改为禁用覆盖层的渲染。

Answer 1

解决方案:

利用 gatsby 的能力改变静态 index.html 文件。 [在Gatsby中自定义Index.html][1]

向生成的 html.js 添加自定义 div

html.js:

   <div
      key={`loader`}
      id="___loader"
      style={{
        alignItems: "center",
        backgroundColor: "#F2F2F2",
        display: "flex",
        justifyContent: "center",
        position: "absolute",
        left: 0,
        top: 0,
        right: 0,
        bottom: 0,
        zIndex: 1,
      }}
   >
      <LoaderSVG width="50%" />
   </div>

在 gatsby-browser.js 中:

gatsby-browser.js:

export const onInitialClientRender = () => {
  document.getElementById("___gatsby").style.display = "block"
  setTimeout(function() {
    document.getElementById("___loader").style.display = "none"
  }, 200)
}

下一步是检查是否所有数据都已加载并添加动态值而不是超时。