1. Durum Değişkeni Oluşturma:

   useState

   hook'unu kullanarak

   isLoading

   adında bir durum değişkeni oluşturun 12.
2. Asenkron İşlemi Başlatma:

   useEffect

   hook'unu kullanarak asenkron işlemi başlatın ve yükleme işlemini başlatmadan önce

   isLoading

   durumunu

   true

   olarak ayarlayın 12.
3. Yükleme Animasyonunu Ekleme: Yükleme sırasında bir yükleme GIF'i veya CSS animasyonu görüntülemek için

   loader-container

   ve

   spinner

   gibi bileşenler kullanın 23.
4. Koşullu Rendering:

   return

   ifadesinde,

   isLoading

   durumuna göre yükleme GIF'ini veya ana içeriği render edin 13. Yükleme tamamlandığında

   isLoading

   durumunu

   false

   olarak ayarlayın 12.

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

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

  useEffect(() => {
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
    }, 2000);
  }, []);

  return (
    <div className="container">
      {loading ? (
        <div className="loader-container">
          <div className="spinner"></div>
        </div>
      ) : (
        <div className="main-content">
          <h1>Hello World!</h1>
          <p>This is a demo project to show how to add animated loading with React.</p>
        </div>
      )}
    </div>
  );
};
``` [2](https://stackabuse.com/how-to-create-a-loading-animation-in-react-from-scratch/).
Kopyala