Gatsby: Is there a way to show a logo and a loading animation on the initial app rendering?

[akolybelnikov]

Summary

I would love for my app to be showing my logo instead of the empty screen while the app is building React DOM.

Relevant information

I have considered appending a div to index.html that would be hidden once the app has loaded but Gatsby is making use of the html.js and that's working differently.

I thought that I could make use of the SSR file, but cannot figure it out.

What's the Gatsby way of doing it?

[btk]

This is not really relevant to Gatsby I think. The whole idea with static is to increase the UX. Assuming the React DOM you are talking about is not pre-rendered, you would want your app to render the part of your app that awaits some kind of third party api to have a feel of "loading or fetching the data".

So there is no gatsby way of doing it, the only situation you would have to have your user to wait for a react DOM render is to await for an api, which shouldn't hold the whole UI of your app back from rendering, you should totally use a loading indicator for the part that awaits a 3rd party server

[akolybelnikov]

@btk while I agree with your view in general, I don’t agree that waiting for an API to fetch data is the only case when user might have to stare at an empty screen for a few seconds.
Mobile connection is notoriously bad in many parts of the world including Europe. On the first loading of the app even SSRendered app can take a while to unpack and build. These are the seconds I’m referring to.
It concerns a Gatsby app with it’s arcitechture and the way the html is generated with JS, so I called it a Gatsby way.
In a non-Gatsby React app you can append a div outside your React that is rendered immediately when the page is called and gets cleared after the JS is unpacked and the div with id app is ready. Do you know of a way to do something similar in Gatsby?

[azdanov]

Closest is gatsby-plugin-nprogress.

Maybe there are some clues inside the package on how to implement a similar effect.

[zabute]

the only situation you would have to have your user to wait for a react DOM render is to await for an api,

@btk You should consider using a source plugin that would fetch the data from the api call so that it gets rendered at build time, unless you're serving personalized content, i.e, user has to login first.

I don’t agree that waiting for an API to fetch data is the only case when user might have to stare at an empty screen for a few seconds.

@akolybelnikov With gatsby, your users don't have to stare at a blank screen until your JS is loaded and parsed, they'll be looking at a functional (links working and all) site before JS is even downloaded. Gatsby uses source and transformer plugins to make any remote data available at build time, i.e., when your run gatsby build and pre-renders it using React's SSR apis.

If you find that your HTML & CSS is a bit bulky, you should work on optimizing your landing pages since showing a loading spinner while HTML & CSS is loading doesn't make sense.

[akolybelnikov]

@zabute thanks! That answers my (unasked) question about the default SSR use by Gatsby. Can you think of a case, when an animated icon / logo is being rendered as a splash screen before the PWA starts on mobile? This is an interesting challenge wit Gatsby.

[marquez138]

@akolybelnikov were you able to figure out how to add a logo and animation? I would also like to implent it for my project if possible?

[btk]

@zabute uhm. Not really. The api might be supplying some kind of data that is getting updated daily or hourly. Like the price of bitcoin, the weather etc.

Some people use gatsby for dynamic or hybrid pages/components. https://www.gatsbyjs.org/docs/building-apps-with-gatsby/

[gatsbot[bot]]

Old issues will be closed after 30 days of inactivity. This issue has been quiet for 20 days and is being marked as stale. Reply here or add the label "not stale" to keep this issue open!

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!

[ghost]

Hi, I found a use case for showing a loader when the page is loading. For instance, when disabling throttling and switching to a slow 3G connection, I would want to show the loader while my components mount. Is it possible to do something along those lines?

I was thinking of adding a <div className="loader"></div> in layout.js, right above <div>{children}</div>, then show and hide it as needed. However, I am having issues implementing this feature. Any help would be appreciated!

[TheWeeezel]

Hello, I would like to make use of this for example when loading gatsby breakpoints. So the user doesn't see the page until the breakpoints are loaded. So this split-second reloads, in the beginning, could be hidden. Any thoughts?

I asked this on Stack too.
https://stackoverflow.com/questions/57188179/show-overlay-only-once-on-page-entrance-not-route-change-howto

[ajayns]

I understand that Gatsby aims at super-fast sites that load instantly. Consider slow mobile internet and bad network, and I'd also like to maintain visual aesthetic so wouldn't want unstyled page/text without fonts loaded etc. In such a scenario is there a method of possible just displaying the logo as the page loads? It'd also help if I have page transitions: I could add a smooth animation from loading to homepage

[TheWeeezel]

Have you checked my solution: https://stackoverflow.com/questions/57188179/show-overlay-only-once-on-page-entrance-not-route-change-howto

It still is not 100% but i m quite satisfied. Maybe we can find out how to get the best out of this.

[LekoArts]

I'd also consider this not to be an issue with Gatsby but how one individual person likes to set up their project. For example:

and I'd also like to maintain visual aesthetic so wouldn't want unstyled page/text without fonts loaded etc.

You could use font-display: swap to first fallback to a similar system font, use gatsby-image for images. There are a lot of articles on the internet which you could follow. Ideally they all should work with Gatsby, hence I'm closing this issue.

Feel free to continue commenting here but we want our issue tracking to highlight bugs etc.

[ajayns]

Gotcha and thank you @LekoArts
I'm not stating it is a bug with Gatsby but I wanted to know how it could be possible to achieve this effect in the easiest and effective way. Cause I don't think we have docs nor a singular solution from this discussion as well. Any inputs are appreciated. @TheWeeezel hey! I did check it out and that seemed our best bet as of now. Although any idea if that'll still work if I wanted animated transitions rather than a quick display: none? I might be wrong but that solution seems a little limiting.

[mohanmarx]

use this command to copy html.js to src path:
cp .cache/default-html.js src/html.js

in html.js add loader wrapper or any loading screen component inside body :

<body {...this.props.bodyAttributes} >
<div id="loader-wrapper" className="loader-wrapper">
<div className="loader"></div>
</div>
.................
</body>

in gatsby-browser.js add :

import './src/index.scss';

export const onClientEntry = () => {
document.getElementById('loader-wrapper').style.display = "block";
}
export const onPreRouteUpdate = () => {
document.getElementById('loader-wrapper').style.display = "block";
}
export const onRouteUpdateDelayed = () => {
document.getElementById('loader-wrapper').style.display = "block";
}
export const onRouteUpdate = () => {
setTimeout(() => {
document.getElementById('loader-wrapper').style.display = "none";
}, 1000);
}

here setTimeout is used for minimum 1 sec delay...
if you don't want that you can remove