How can I create custom loading indicators in React?

How can I create custom loading indicators in React?

You can create custom loading indicators in React by using state to manage the loading status and rendering a component conditionally.

Can you show me a simple example?

Sure! You can create a LoadingIndicator component and use it like this:

const LoadingIndicator = () => <div>Loading...</div>;

const App = () => {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const timer = setTimeout(() => setLoading(false), 2000);
    return () => clearTimeout(timer);
  }, []);

  return loading ? <LoadingIndicator /> : <div>Data Loaded!</div>;
};

What if I want to customize the loading indicator's style?

You can customize the style by adding CSS classes or inline styles to the LoadingIndicator component. For example:

const LoadingIndicator = () => <div style={{ color: 'blue', fontSize: '20px' }}>Loading...</div>;