Project 31 of 100 - Build an Animated Loading Screen in React with Lottie

Hey! I'm on a mission to make 100 React.js projects ending March 8th. Please follow my dev.to profile or my twitter for updates and feel free to reach out if you have questions. Thanks for your support!

Link to today's deployed app: Link
Link to the repo: github

I originally got into Frontend Development because building fun and engaging user experiences is incredibly satisfying to me. You can be a whiz at algorithms and ultimately have very little impact on the end user- but the frontend always felt like it was where the magic really happened. This was one of those projects that incorporates that fun aspect of web development.

React is a big package and can take a while to load on the user's browser, especially on a dodgy mobile connection, so you might want to show a loading screen to keep your customers engaged. I was asked to build a simple e-commerce webpage for a friend so this is the first part of that process.

Introducing Lottie

A couple of months ago I came across a dev.to article (link here) introducing an online repository of animations and how to use them in React and I immediately knew it was something I wanted to use.

Lottie animations can be downloaded as regular JSON files. Then a web player is used to render the data stored in the JSON as an animation. There is also a handy npm package that I used called react-lottie. The website has paid animations but a healthy amount of free ones as well.

There are also options to run the Lottie Player as a script in a regular html file, or even convert the Lottie animation to a gif with just one click. This is a really flexible toolset.

The e-commerce page I'm building is going to be a young women's fashion site with a pink theme so I was already really excited to see what animations were available to fit this and settled (for now) on this great free unicorn animation.

Using a Lottie Animation in React

I'm going to paraphrase the instructions from the excellent blog post I mentioned about these animations by Dev.to blogger CiaraMaria here:

1. Download the react-lottie npm package

2. Select a Lottie animation you like on lottiefiles.com and download the JSON file, then bring it into your project directory.

3. Create a Lottie.js file in your src folder with the following code inside:
   

import React from "react";
import Lottie from "react-lottie";

export default function LottieAnimation({ lotti, width, height }) {
  const defaultOptions = {
    loop: true,
    autoplay: true,
    animationData: lotti,
    rendererSettings: {
      preserveAspectRatio: "xMidYMid slice",
    },
  };

  return (
    <div>
      <Lottie options={defaultOptions} height={height} width={width} />
    </div>
  );
};

4 . Import the Lottie JS file into the component where you want the animation displayed. Then create a <Lottie /> JSX element (or whatever you imported it as-- your choice) and give it width, height, and lotti props. Your animation will now display in the component.

Detecting Page Load in React

The second part to implementing a React UI to display while the DOM is loading or while the rest of the site loads is detecting when the site is loaded and interactive. After a bit of research, this seems like a contradiction in React.

Before a component can be displayed, the DOM must be loaded since React components are written in JSX and rendered by ReactDOM. So displaying an actual React component during pageload is still a bit of a mystery to me. I read multiple articles on this and they all seem to be satisfied with the deeply wrong approach of just creating a timer and displaying a loading component while the timer is running (article 1, article 2).

This is what I ended up settling on, and just set the timer for 3500 milliseconds before displaying the other components in . But this didn't leave me feeling honest.

How do major enterprise companies with web applications written in all React do this? I'm sure they aren't normally relying on setTimeout. The best answer I could find (article: The Quickest Way to Detect When the DOM is Ready) is not a React solution but instead uses the very cool requestAnimationFrame() Javascript window method in the public HTML file to continually check if some element you specify has been loaded into the DOM yet.

This may mean that I'll have to write out my animation in real HTML, CSS and Javascript, but at least it will accurately reflect the loading status of the site, and thus be more helpful.

Takeaways

This was a fun project because it incorporated several aspects of web development at once, involved research, and the use of a new package. In my (short) experience as a professional developer, projects like this where 60% of what you're doing you know and 40% you have to research and find a solution to are more reflective of real life.

Animating a unicorn with a pink background and engulfing the user's whole screen with this was fun too.

Tomorrow I'll extend the project and develop the actual main site functionality.

Comments

[CiaraMaria]

I love this utilization for Lottie, and thanks for the mention! :]

[Ibtsam Ahmad]

Hi. I also want to learn React but don't know where to start can you please guide.

[James Hubert]

Hi Ibtsam!

Do you already know HTML, CSS, and JavaScript? If not, I would start with Colt Steele or Angela Yu’s Udemy web development courses. Then I would look up the Net Ninja on Udemy and take his JavaScript course.

If you already know html, CSS, and JavaScript, then you are ready, and I would learn React with these 3 resources (in this order!):

1. YouTube - Traversy Media Reactjs Crash Course (2019) which introduces the major ideas and how to setup the environment on your computer.
2. Scrimba - Bob Ziroll’s “Learn React for Free” introduction.
3. Scrimba - Bob Ziroll’s React Bootcamp.

If you do all three of those you will be great at React. I am working on finishing the last one now.

[Ibtsam Ahmad]

Thank you very much..