Episode 18 of 32

Conditional Loading Message

Show a loading indicator while data is being fetched from the server.

Add a loading state for better user experience during data fetching.

Loading State

const [isPending, setIsPending] = useState(true);

useEffect(() => {
  fetch("http://localhost:8000/blogs")
    .then(res => res.json())
    .then(data => {
      setBlogs(data);
      setIsPending(false);
    });
}, []);

return (
  <div>
    {isPending && <div>Loading...</div>}
    {blogs && <BlogList blogs={blogs} />}
  </div>
);