How to Implement a Loading Icon for Mobile Development Using React Native

In modern app development, a good loading icon is crucial to improve the user experience and ensure that users don’t feel frustrated while waiting. In this guide, I'll show you how to implement a loading icon for mobile development using React Native.

Requirements

• React
• Expo

Overview

We'll use Lottie instead of just CSS or Tailwind. Lottie is simpler, provides more options, and looks significantly better.

How to

Install lottie

First, let's install lottie-react-native on expo to set nice moving loading icon on a page.

expo install lottie-react-native

Step 2: Access Lottie Files

Go to LottieFiles and download a JSON file for the animation you like. For this guide, I've chosen the following one: LottieFiles Example Animation.

Add the JSON file to your assets folder in your project. This file will be used as the animation for the loading indicator.

Step 3: Implement the Loading Component

Now, let’s create a new Loading component that uses Lottie for the loading animation. Make sure to update the "source" property to point to the correct path of your JSON file.

import { SafeAreaView } from "react-native";
import LottieView from "lottie-react-native";

const Loading = () => {
  return (
    <SafeAreaView className="bg-primary h-full justify-center items-center">
      <LottieView
        source={require("@/assets/json/loading.json")} 
        autoPlay
        loop
        style={{ width: 150, height: 150 }}
      />
    </SafeAreaView>
  );
};

export default Loading;

• source: Set to the path of your downloaded JSON file.
• autoPlay: Automatically plays the animation on render.
• loop: Makes the animation loop continuously.
• style: Adjust the size of the animation to fit your design.

Step 4: Using the Loading Component

Let’s see how you can use the Loading component. Below is an example of using it in a bookmark page, which shows the loading animation until the data is fetched.

import Loading from "@/components/Loading";

const bookmark = () => {
  const {
    data: posts,
    refetch,
    isLoading,
  } = useAppwrite(() => bookmarkedPosts(user?.$id));
  if (isLoading) {
    return <Loading />;
  }
  return (
    <SafeAreaView className="bg-primary h-full">
      ...
    </SafeAreaView>
  );
};

export default bookmark;

Explanation

• Loading Component: The Loading component is shown when isLoading is true, giving users visual feedback that data is being fetched.
• Conditionally Rendered Loading: The loading animation is displayed while waiting for data. This prevents users from staring at a blank screen and instead provides visual feedback.

Conclusion

And that’s it! You now have a nice, cute loading animation in your app that provides a much better user experience compared to just a simple spinner or plain CSS loading indicator.

Thanks for reading!