Cara mengisi loading sebelum page reactjs loaded semua

Hallo saya mau tanya bagaimana cara mengisi loading sebelum Page terload semua. saya sudah mencoba dengan useEffect tetapi loading hanya bekerja setelah fetch selesai , tetapi setelah loading selesai image yang di ambil dari api belakangan tampilnya

mohon bantuanya

const [loading, setLoading] = useState(true)

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

return (
        <div>
            {
                loading ? (
                    <Loading/>
                ):(
                    <div>
                        <Article/>
                    </div>
                )
            }
        </div>
  );