Önemli: Diğer yazılarımla direkt bağlantılı bir yazıdır. İlk olarak bu yazıdan okumaya başladıysanız, eğitim serisine kısaca bir göz atmanızı tavsiye ederim.
Merhabalar.
Get isteği ile işlemlerimize devam ediyoruz.
Load Post butonuna basınca, API’a istek atıyorduk ve blog postlarımız geliyor ve ekranda gösteriyorduk. Çoğu zaman API’a istek attığımızda, isteğimizin tamamlanması biraz zaman alabilir. Bu zaman zarfında, ekranda kullanıcıya istekle alakalı bir işlem olduğunu göstermek iyi bir UX geliştirmesidir.
Şimdi uygulamamıza bunu ekleyeceğiz.
Bunu bir isLoading state ile gerçekleştireceğiz. Liste ögelerinin geleceği yere işlem sırasında Loading yazacağız ya da bir Loading gif koyacağız.
Bir de şunu kontrol edelim, eğer isteğimiz boş dönerse post olmadığı bildirimini gösterelim. Bunu da isData state’i ile kontrol edelim.
Bu bildirimi gösterirken bir loading.gif ile yapalım istiyorum. Bunun için src klasörü içine Assets onun içine Images klasörü oluşturacağız. Buraya aşağıda verdiğim gif koyalım.
import React, { useState } from 'react'
import './BlogPost.css'
import loadingGif from "../../Assets/Images/loading.gif"
const BlogPost = () => {
const [posts, setPosts] = useState([]);
const [isLoading, setIsLoading] = useState(false);
const [isData, setIsData] = useState(false);
const loadPosts = async () => {
try {
setIsLoading(true);
const response = await fetch('https://jsonplaceholder.typicode.com/posts');
const data = await response.json();
setPosts(data);
setIsLoading(false);
if (data.length === 0 ? setIsData(false) : setIsData(true));
} catch (error) {
console.error('There was an error!', error);
}
};
return (
<div className="blogPost">
<button onClick={loadPosts}>Load Posts</button>
{isLoading &&
<div className="center">
<img src={loadingGif} width={100} alt="Loading" />
</div>
}
{!isData &&
<div className="center">
<h3>There is no data</h3>
</div>
}
{posts.map((post) => (
<div key={post.id} className="post">
<h2>{post.title}</h2>
<p>{post.body}</p>
</div>
))}
</div>
);
}
export default BlogPost
.blogPost {
display: flex;
flex-direction: column;
align-items: center;
}
.post {
width: 60%;
border: 1px solid #ccc;
border-radius: 5px;
padding: 20px;
margin: 20px 0;
}
button {
padding: 10px 20px;
margin: 20px 0;
border: none;
border-radius: 5px;
background-color: #007BFF;
color: white;
cursor: pointer;
}
.center {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
loading.gif’i import ediyorum.
import loadingGif from "../../Assets/Images/loading.gif"
isLoading ve isData state’lerini oluşturduk. Başlangıç değerleri false olarak ayarladım.
const [isLoading, setIsLoading] = useState(false);
const [isData, setIsData] = useState(false);
{isLoading &&
<div className="center">
<img src={loadingGif} width={100} alt="Loading" />
</div>
}
{!isData &&
<div className="center">
<h3>There is no data</h3>
</div>
}
isLoading değeri true olursa ekranda Loading gifi görünecektir.
isData’nın değili ile de eğer data yoksa ekranda data yok gözükecek.
const loadPosts = async () => {
try {
setIsLoading(true);
const response = await fetch('https://jsonplaceholder.typicode.com/posts');
const data = await response.json();
setPosts(data);
setIsLoading(false);
if (data.length === 0 ? setIsData(false) : setIsData(true));
} catch (error) {
console.error('There was an error!', error);
}
};
loadPosts çağırıldığında API isteği başlayacağı için isLoading state’ini true olacak güncelliyoruz. Böyle yapınca ekranda gif dönmeye başlıyor. İsteğin işi bittiğinde isLoading state’ini false’a çekiyoruz.
Sonraki adımda, data’nın var olup olmadığını sorguluyoruz bu duruma göre isData state’ini güncelliyoruz.
Bu işlemi de tamamladık.
Bir sonraki yazımda görüşmek üzere.
Selamlar, bu yazımda Oly'nin 1 hafta boyunca olduğu GS iğnesi, yaşanan değişimleri anlatmaya çalışacağım. PCR…
Selamlar, bu yazımda Hemogram ve Biyokimya sonuçlarımızı göstermek için İÜCHH'ne tekrar gidişimizi ve sonrasını anlatacağım.…
Selamlar, bu yazımda GS iğnesine başlama kararımızı ve Oly’de bu süreçte nelere dikkat ediyor, neler…
Selamlar, bu yazımda İÜCHH'deki tedavi sürecimiz ve sonrasında yaşananlardan bahsetmeye çalışacağım. 20.06.2025 Cuma günü saat…
Eve Dönüş ve İlk Şüpheler 18 Haziran Perşembe saat 23 sularında İstanbul’daki evimize giriş yaptık.…
9 Haziran Pazartesi günü Aydın’daki sürecimiz bitti ve Antalya yolculuğumuz başladı. Saat 11 gibi yola…