Gatsby JS의 시작 화면

개츠비 웹사이트에 시작 화면을 추가하는 문제에 착수했다면 올바른 위치에 있는 것입니다. 나는 웹사이트에 스플래시 화면을 추가하려고 했고 많은 포럼을 방문해야 했지만 여기저기서 몇 가지 조각을 찾은 후 한 곳에서 많은 솔루션을 찾을 수 없었습니다.

어떻게 했는지 말하게 해줬어



먼저 스플래시 화면으로 추가할 멋진 GIF를 찾은 다음 로더 코드를 추가합니다. 그러면 로더가 하는 일은 이미지를 마무리하고 id를 추가하는 것입니다. 이는 우리가 해당 로더를 더 대상으로 지정하기를 원했기 때문에 정말 중요합니다.

src/loader.js

import React from "react";
import styled from "styled-components";
import BCTLoader from "../../assets/gif/BCTloader.gif";

const Loader = () => {
  return (
    <LoaderWrapper id="loader-wrapper">
      <img src={BCTLoader} alt="GIF Image" />
    </LoaderWrapper>
  );
};
export default Loader;

그런 다음 CSS를 추가합니다. 스타일이 지정된 구성 요소로 작업하는 것을 좋아합니다. 간단한 CSS로 자유롭게 할 수 있습니다.

const LoaderWrapper = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffff;
  z-index: 9999;
  display: none;
  justify-content: center;
  align-items: center;

  img {
    width: 20vw;
  }
`;

레이아웃 파일에 추가하십시오. 없는 경우 반응과 같은 중앙 집중식 조각이 없기 때문에 모든 페이지에 대한 래퍼를 가질 수 있도록 하나 만드십시오. 추가해야 할 것입니다.

src/layout.js

import React from "react";
import Header from "./Navbar";
import Footer from "./Footer";
import Loader from "./Loader";

const Layout = ({ children }) => {
  return (
    <>
      <Header />
      <main>{children}</main>
      <Footer />
      <Loader />
    </>
  );
};

export default Layout;

이제 완료되면 초기 렌더링에 액세스할 수 있도록 gatsby-brower로 작업할 수 있습니다.

개츠비-브라우저.js

export const onInitialClientRender = () => {
  setTimeout(() => {
    if (document.getElementById("loader-wrapper")) {
      document.getElementById("loader-wrapper").style.display = "flex";
    }
  }, 0);
};

export const onRouteUpdate = () => {
  setTimeout(() => {
    if (document.getElementById("loader-wrapper")) {
      document.getElementById("loader-wrapper").style.display = "none";
    }
  }, 3500);
};

그게 다야! 이제 멋진 앱 시작 화면이 표시됩니다.
자유롭게 의견을 남겨주세요 🙂.