Over the weekend I decided to revisit a full-stack Slack Clone I had built. I wanted to add some new features to it like adding emojis to messages and a view page of all the current users. But I also wanted to add a loading screen for the initial load of the app. Loading screens can be a useful addition to your application by enhancing the user’s experience. In this article, I am going to go over how I did it.
The reason I wanted to add a load screen was I was not happy with how slow the initial load was. If you are like me, you are probably using the free version of Heroku, or something similar, to host your projects. It’s a great service but since it’s free your app is probably not on Heroku’s servers priority list haha. So before I get into the actual code I want to provide a little overview of the loading event of a web application.
Here is a simple diagram below:
The website’s files are stored on a server (Heroku) sent across the internet and to the user you requested those files. Pretty simple right? Now there are different ways to send these files to the user.
One way is Server-Side Render and the other is Client-Side rendering. I am not going to go to much in-depth on this but there are a lot of great articles already out there.
My app is rendering Client-Side; which is better for interactive sites like mine.
As you can see the browser is doing all the work in Client-Side rendering. While the browser is downloading js and executing react I want to provide content for the user. This is where the loading screen comes in!
Since my app is rendering client-side and is also a full-stack application, meaning having a front and a backend, the load event can be broken into two parts. First providing the load screen for the initial build and second providing a load screen while the front end loads the data from the backend.
Initial Build:
If you are doing client-side rendering the first thing the DOM is going to see is the root HTML file in your public folder. So this is where the load screen is going to go. Now you can put the loading Elements outside of the root Dom element for your React app and delete them in the initial mount of the React app but you can also put them inside the root DOM element and React automatically deletes it once it has mounted. Whichever way floats your boat!
Try and keep the load screen as simple as possible. Mine is just a single image with some CSS animations.
#software-development #javascript #web-development #react #web-design
