How do I implement loading indicators in React?

How do I implement loading indicators in React?

You can use state to manage loading indicators. Typically, you set a loading state to true when fetching data.

Can you show me a simple example?

Sure! Here's a basic example:

import React, { useState, useEffect } from 'react';

const LoadingExample = () => {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://api.example.com/data');
      const result = await response.json();
      setData(result);
      setLoading(false);
    };
    fetchData();
  }, []);

  if (loading) return <div>Loading...</div>;
  return <div>Data: {JSON.stringify(data)}</div>;
};

This will show a loading message while the data is being fetched.

What if I want to customize the loading indicator?

You can replace the loading message with a spinner or any custom component. Just render your custom loader instead of the text.