App.jsx
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
import React, { useEffect, useState } from "react"; import LazyLoad from "react-lazyload"; function App() { const [posts, setPosts] = useState([]); const [loading, setLoading] = useState(true); // fetch the posts const fetchPosts = async () => { try { const response = await fetch( "https://jsonplaceholder.typicode.com/posts" ); const data = await response.json(); console.log(data); // hide the loading screen setLoading(false); setPosts(data); } catch (error) { console.log(error); } }; useEffect(() => { fetchPosts(); }, []); return ( <div className="post-gallery"> {posts.map((post) => ( <LazyLoad key={post.id} height={5} offset={5} placeholder={<div>Loading Post...</div>} > <div className="post-card"> <img src={`https://picsum.photos/id/${post.id}/300/200`} alt={`Post ${post.id}`} className="post-image" /> <h3>{post.title}</h3> <p>{post.body}</p> </div> </LazyLoad> ))} </div> ); } export default App; |
