Create a loading.js
file to show loading UI while the page loads:
// app/posts/loading.js
export default function Loading() {
return <div>Loading posts...</div>;
}
// app/posts/page.js
async function PostsPage() {
// This delay will show the loading component
await new Promise(resolve => setTimeout(resolve, 2000));
const posts = await fetch('/api/posts');
return <PostsList posts={posts} />;
}