How can I create a loading spinner in React?

How can I create a loading spinner in React?

You can create a loading spinner in React using CSS animations or libraries like React Spinners. Would you like a code example?

Yes, please provide a code example.

Here's a simple example using CSS:

import React from 'react';
import './Spinner.css';

const Spinner = () => {
  return <div className='spinner'></div>;
};

export default Spinner;

And in your Spinner.css:

.spinner {
  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); }
}

How do I use this spinner in my app?

You can use the spinner component in your app like this:

import React, { useState, useEffect } from 'react';
import Spinner from './Spinner';

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

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

  return (
    <div>
      {loading ? <Spinner /> : <h1>Data Loaded!</h1>}
    </div>
  );
};

export default App;