denshooter/portfolio
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement skeleton loading across all dynamic sections

Browse Source 
Added a shimmering Skeleton component. Integrated loading states for Hero, About (Bento Grid), Reading Log, Projects Archive, and Library pages for a premium UX.
This commit is contained in:
denshooter
2026-02-16 01:43:23 +01:00
parent 739ee8a825
commit 0684231308
8 changed files with 208 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
app/components/Projects.tsx
View File

@@ -6,6 +6,7 @@ import { ArrowUpRight } from "lucide-react";
import Link from "next/link";
import Image from "next/image";
import { useLocale, useTranslations } from "next-intl";
import { Skeleton } from "./ui/Skeleton";
interface Project {
id: number;
@@ -24,6 +25,7 @@ interface Project {
const Projects = () => {
const [projects, setProjects] = useState<Project[]>([]);
const [loading, setLoading] = useState(true);
const locale = useLocale();
const t = useTranslations("home.projects");
@@ -35,7 +37,11 @@ const Projects = () => {
const data = await response.json();
setProjects(data.projects || []);
}
} catch (error) {}
} catch (error) {
console.error("Featured projects fetch failed:", error);
} finally {
setLoading(false);
}
};
loadProjects();
}, []);
@@ -45,20 +51,31 @@ const Projects = () => {
<div className="max-w-7xl mx-auto">
<div className="flex flex-col md:flex-row justify-between items-end mb-16 gap-6">
<div>
<h2 className="text-4xl md:text-6xl font-black text-stone-900 dark:text-stone-50 tracking-tight mb-4">
Selected Work
<h2 className="text-4xl md:text-6xl font-black text-stone-900 dark:text-stone-50 tracking-tighter mb-4 uppercase">
Selected Work<span className="text-liquid-mint">.</span>
</h2>
<p className="text-xl text-stone-500 max-w-xl">
<p className="text-xl text-stone-500 max-w-xl font-light">
Projects that pushed my boundaries.
</p>
</div>
<Link href={`/${locale}/projects`} className="group flex items-center gap-2 text-stone-900 dark:text-stone-100 font-bold border-b-2 border-stone-900 dark:border-stone-100 pb-1 hover:opacity-70 transition-opacity">
View Archive <ArrowUpRight className="group-hover:-translate-y-1 group-hover:translate-x-1 transition-transform" />
<Link href={`/${locale}/projects`} className="group flex items-center gap-2 text-stone-900 dark:text-stone-100 font-black border-b-2 border-stone-900 dark:border-stone-100 pb-1 hover:opacity-70 transition-all text-xs uppercase tracking-widest">
View Archive <ArrowUpRight className="group-hover:-translate-y-1 group-hover:translate-x-1 transition-transform" size={14} />
</Link>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
{projects.map((project) => (
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12">
{loading ? (
Array.from({ length: 2 }).map((_, i) => (
<div key={i} className="space-y-6">
<Skeleton className="aspect-[4/3] rounded-[2.5rem]" />
<div className="space-y-3">
<Skeleton className="h-8 w-1/2" />
<Skeleton className="h-4 w-3/4" />
</div>
</div>
))
) : (
projects.map((project) => (
<motion.div
key={project.id}
initial={{ opacity: 0, y: 20 }}