Create 3 different types of Loading Screens in React (Part-2)

If you're following this series this is the part 2 where we're going to build 2nd type of Loading Screen.

Create new file and name it as PreLoader2.js

create functional component, and import react-Lottie library.

import Lottie from "react-lottie";

In this type of loading screen we have to download animation files from https://lottiefiles.com/

For this tutorial i'm using below two files,

Earth animation : https://lottiefiles.com/79794-world-locations
Success animation: https://lottiefiles.com/1127-success

Download this file (Lottie JSON) and keep them in your project directory.

Let's import this json files like below,

import * as location from "../79794-world-locations.json";
import * as success from "../1127-success.json";

As mentioned here in the react-Lottie library documentation,

we need to set default options to use this animation files in our project so first declare this options as,

const defaultOptions1 = {
  loop: true,
  autoplay: true,
  animationData: location.default,
  rendererSettings: {
    preserveAspectRatio: "xMidYMid slice",
  },
};

const defaultOptions2 = {
  loop: true,
  autoplay: true,
  animationData: success.default,
  rendererSettings: {
    preserveAspectRatio: "xMidYMid slice",
  },
};

defaultOptions1 for first file while defaultOptions2 for second file.

In this tutorial we're going to use 3 state,

  const [data, setData] = useState([]);
  const [loading, setloading] = useState(undefined);
  const [completed, setcompleted] = useState(undefined);

data state: To store data which comes from API call.
loading state: Boolean state for first animation file.
completed state: Boolean state for second animation file when API call is completed.

  useEffect(() => {
    setTimeout(() => {
      fetch("https://jsonplaceholder.typicode.com/posts")
        .then((response) => response.json())
        .then((json) => {
          console.log(json);
          setData(json);
          setloading(true);

          setTimeout(() => {
            setcompleted(true);
          }, 1000);
        });
    }, 2000);
  }, []);

UseEffect method is almost same as in part-1,
only difference is that instead of done state we have to set completed and loading state to true,
Also, I have used one more timeout function for 1 sec to see the 2nd animation.

return (
    <>
      {!completed ? (
        <>
          {!loading ? (
            <Lottie options={defaultOptions1} height={200} width={200} />
          ) : (
            <Lottie options={defaultOptions2} height={100} width={100} />
          )}
        </>
      ) : (
        <>
          <h1>Your Data</h1>
        </>
      )}
    </>
  );
}

As shown in the above code,

in the return,
if completed state is false then we will render loading screen else we will render our data.

In the animation part we will do one more conditional rendering,

when loading state is false then we will render the earth animation else we will render the success animation.

Dont't forget to set options={defaultOptions1} for file 1 and options={defaultOptions2} for file 2.

Full Code:

Now as per the Creative Commons License of https://lottiefiles.com/page/license The creator(s) must be attributed in your application.

You can attribute creator as shown in line no 60 to 71.

That's the end of Part-2.