I am building this website and have hosted it on the heroku free tier therefore takes a minute there before starting up.I feel this is rather slow and would probably be wise if i had something like a splash screen like you would see when you go to the twitter or instagram websites where it displays a logo first instead of just a blank screen before the website loads up.

Would anybody know how to do this in React? Please provide me the code on how to achieve this.

CodePudding user response：

The problem here is not that the react app takes time to load, but the free heroku dyno itself goes offline if it idle for a certain while.

You can make use of some hacks like https://www.pingdom.com/, where you need to make a request to your app every x interval to avoid it from going to sleep.

Note: This will impact your free dyno hours.

CodePudding user response：

I think the easiest and, maybe, best way would be to do this through the React Context API. Here is a Codesandbox example of how it can be done using the React Context API.

CodePudding user response：

So first what your talking about is preloader, not splash screens,

splash screens are used for mobile applications, while preloader, or loading screens are used for web applications

I could drop some codes on how to achieve that

CodePudding user response：

So first what your talking about is preloader, not splash screens,

splash screens are used for mobile applications, while preloader, or loading screens are used for web applications

I would drop some codes on how to achieve that, do i get what you need right?