How can I create a custom loading indicator in React?

How can I create a custom loading indicator in React?

You can create a custom loading indicator in React by using a combination of CSS animations and React state. Would you like a code example?

Yes, please provide a code example!

Here's a simple example:

import React from 'react';
import './Loader.css'; // Import your CSS file

const Loader = () => {
  return <div className='loader'>Loading...</div>;
};

export default Loader;

And in your Loader.css:

.loader {
  border: 8px solid #f3f3f3;
  border-top: 8px solid #3498db;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

This will create a simple spinning loader.

How can I integrate this loader into my app?

You can integrate the loader by conditionally rendering it based on your loading state. For example:

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

  React.useEffect(() => {
    // Simulate a data fetch
    setTimeout(() => setLoading(false), 2000);
  }, []);

  return (
    <div>
      {loading ? <Loader /> : <div>Your content here</div>}
    </div>
  );
};