import { Suspense } from "react";
async function Posts() {
await new Promise((resolve) => setTimeout(resolve, 500));
return (
<ul className="list-disc pl-6 space-y-2">
<li className="hover:text-blue-600 transition-colors">
<h2 className="text-lg font-semibold">{`The Unexpected Journey of ${Math.random().toString(36).substring(7)}`}</h2>
<p className="text-sm text-gray-600">{`Discover the twists and turns in this ${Math.random() < 0.5 ? "thrilling" : "heartwarming"} tale of ${Math.random() < 0.5 ? "adventure" : "self-discovery"}.`}</p>
</li>
<li className="hover:text-blue-600 transition-colors">
<h2 className="text-lg font-semibold">{`Secrets of the ${Math.random() < 0.5 ? "Ancient" : "Modern"} ${Math.random().toString(36).substring(7)}`}</h2>
<p className="text-sm text-gray-600">{`Uncover the mysteries hidden within ${Math.random() < 0.5 ? "forgotten ruins" : "bustling cities"} in this captivating exploration.`}</p>
</li>
<li className="hover:text-blue-600 transition-colors">
<h2 className="text-lg font-semibold">{`The ${Math.random() < 0.5 ? "Rise" : "Fall"} of ${Math.random().toString(36).substring(7)}`}</h2>
<p className="text-sm text-gray-600">{`A ${Math.random() < 0.5 ? "gripping" : "poignant"} narrative that ${Math.random() < 0.5 ? "challenges" : "inspires"} readers to reflect on the nature of ${Math.random() < 0.5 ? "power" : "humanity"}.`}</p>
</li>
</ul>
);
}
export default function PostsLoader() {
return (
<div className="p-2">
<Suspense fallback={"Loading..."}>
<Posts />
</Suspense>
</div>
);
}