This content originally appeared on DEV Community and was authored by Syed Faran Mustafa
If you embark on the problem to add splash screen to you gatsby website you are in the right place. I myself was trying to add the splash screen to the website and had to go a lot forums and couldn't but finally done that.
You let me tell you how did I do it
So first find a cool GIF you want to add as an splash screen then add loader code
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;
and add some css to it, I like working with styled components feel free to it with 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;
}
`;
Add that to your layout file if you have any if you don't have that please make one so we can have a wrapper for all the pages
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;
Now when you are done with it we can work with gatsby brower so we can access initial rendering
gatsby-browser.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);
};
This content originally appeared on DEV Community and was authored by Syed Faran Mustafa
Syed Faran Mustafa | Sciencx (2022-03-29T11:47:26+00:00) Splash Screen on Gatsby JS. Retrieved from https://www.scien.cx/2022/03/29/splash-screen-on-gatsby-js/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.