feat: implement skeleton loading across all dynamic sections

Added a shimmering Skeleton component. Integrated loading states for Hero, About (Bento Grid), Reading Log, Projects Archive, and Library pages for a premium UX.
2026-02-16 01:43:23 +01:00
parent 739ee8a825
commit 0684231308
8 changed files with 208 additions and 78 deletions
--- a/app/[locale]/books/page.tsx
+++ b/app/[locale]/books/page.tsx
@@ -1,34 +1,33 @@
-import { getBookReviews } from "@/lib/directus";
+"use client";
+
 import { getLanguageAlternates, toAbsoluteUrl } from "@/lib/seo";
-import type { Metadata } from "next";
 import { BookOpen, ArrowLeft, Star } from "lucide-react";
 import Link from "next/link";
 import Image from "next/image";
+import { useEffect, useState } from "react";
+import { useLocale } from "next-intl";
+import { Skeleton } from "@/app/components/ui/Skeleton";
+import { BookReview } from "@/lib/directus";

-export const revalidate = 300;
+export default function BooksPage() {
+  const locale = useLocale();
+  const [reviews, setReviews] = useState<BookReview[]>([]);
+  const [loading, setLoading] = useState(true);

-export async function generateMetadata({
-  params,
-}: {
-  params: Promise<{ locale: string }>;
-}): Promise<Metadata> {
-  const { locale } = await params;
-  return {
-    title: locale === "de" ? "Meine Bibliothek" : "My Library",
-    alternates: {
-      canonical: toAbsoluteUrl(`/${locale}/books`),
-      languages: getLanguageAlternates({ pathWithoutLocale: "books" }),
-    },
-  };
+  useEffect(() => {
+    const fetchBooks = async () => {
+      try {
+        const res = await fetch(`/api/book-reviews?locale=${locale}`);
+        const data = await res.json();
+        if (data.bookReviews) setReviews(data.bookReviews);
+      } catch (error) {
+        console.error("Books fetch failed:", error);
+      } finally {
+        setLoading(false);
      }
-
-export default async function BooksPage({
-  params,
-}: {
-  params: Promise<{ locale: string }>;
-}) {
-  const { locale } = await params;
-  const reviews = await getBookReviews(locale);
+    };
+    fetchBooks();
+  }, [locale]);

  return (
    <div className="min-h-screen bg-[#fdfcf8] dark:bg-stone-950 pt-32 pb-20 px-6 transition-colors duration-500">
@@ -52,7 +51,18 @@ export default async function BooksPage({
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-          {reviews?.map((review) => (
+          {loading ? (
+            Array.from({ length: 6 }).map((_, i) => (
+              <div key={i} className="bg-white dark:bg-stone-900 rounded-[2.5rem] p-10 border border-stone-200/60 dark:border-stone-800/60 shadow-sm flex flex-col h-full">
+                <Skeleton className="aspect-[3/4] rounded-2xl mb-8" />
+                <div className="space-y-3">
+                  <Skeleton className="h-8 w-3/4" />
+                  <Skeleton className="h-4 w-1/2" />
+                </div>
+              </div>
+            ))
+          ) : (
+            reviews?.map((review) => (
              <div 
                key={review.id}
                className="bg-white dark:bg-stone-900 rounded-[2.5rem] p-10 border border-stone-200/60 dark:border-stone-800/60 shadow-sm flex flex-col h-full hover:shadow-xl transition-all"
@@ -82,7 +92,8 @@ export default async function BooksPage({
                  )}
                </div>
              </div>
-          ))}
+            ))
+          )}
        </div>
      </div>
    </div>
--- a/app/_ui/ProjectDetailClient.tsx
+++ b/app/_ui/ProjectDetailClient.tsx
@@ -8,6 +8,7 @@ import ReactMarkdown from "react-markdown";
 import { useTranslations } from "next-intl";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
+import { Skeleton } from "../components/ui/Skeleton";

 export type ProjectDetailData = {
  id: number;
--- a/app/_ui/ProjectsPageClient.tsx
+++ b/app/_ui/ProjectsPageClient.tsx
@@ -6,6 +6,7 @@ import { ArrowUpRight, ArrowLeft, Search } from "lucide-react";
 import Link from "next/link";
 import { useLocale, useTranslations } from "next-intl";
 import Image from "next/image";
+import { Skeleton } from "../components/ui/Skeleton";

 export type ProjectListItem = {
  id: number;
@@ -30,6 +31,13 @@ export default function ProjectsPageClient({

  const [selectedCategory, setSelectedCategory] = useState("all");
  const [searchQuery, setSearchQuery] = useState("");
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    // Simulate initial load for smoother entrance or handle actual fetch if needed
+    const timer = setTimeout(() => setLoading(false), 800);
+    return () => clearTimeout(timer);
+  }, []);

  const categories = useMemo(() => {
    const unique = Array.from(new Set(projects.map((p) => p.category))).filter(Boolean);
@@ -103,7 +111,18 @@ export default function ProjectsPageClient({

        {/* Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-          {filteredProjects.map((project) => (
+          {loading ? (
+            Array.from({ length: 4 }).map((_, i) => (
+              <div key={i} className="bg-white dark:bg-stone-900 rounded-[3rem] p-10 border border-stone-200/60 dark:border-stone-800/60 shadow-sm flex flex-col h-full">
+                <Skeleton className="aspect-[16/10] rounded-[2rem] mb-8" />
+                <div className="space-y-3">
+                  <Skeleton className="h-8 w-1/2" />
+                  <Skeleton className="h-4 w-3/4" />
+                </div>
+              </div>
+            ))
+          ) : (
+            filteredProjects.map((project) => (
            <motion.div key={project.id} initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }}>
              <Link href={`/${locale}/projects/${project.slug}`} className="group block h-full">
                <div className="bg-white dark:bg-stone-900 rounded-[3rem] p-10 border border-stone-200/60 dark:border-stone-800/60 shadow-sm h-full hover:shadow-xl transition-all flex flex-col">
--- a/app/components/About.tsx
+++ b/app/components/About.tsx
@@ -11,6 +11,7 @@ import { TechStackCategory, Hobby, BookReview } from "@/lib/directus";
 import Link from "next/link";
 import ActivityFeed from "./ActivityFeed";
 import BentoChat from "./BentoChat";
+import { Skeleton } from "./ui/Skeleton";

 const iconMap: Record<string, any> = {
  Globe, Server, Code, Wrench, Shield, Activity, Lightbulb, Gamepad2
@@ -24,6 +25,7 @@ const About = () => {
  const [hobbies, setHobbies] = useState<Hobby[]>([]);
  const [reviewsCount, setReviewsCount] = useState(0);
  const [cmsMessages, setCmsMessages] = useState<Record<string, string>>({});
+  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
@@ -50,7 +52,11 @@ const About = () => {

        const booksData = await booksRes.json();
        if (booksData?.bookReviews) setReviewsCount(booksData.bookReviews.length);
-      } catch (error) {}
+      } catch (error) {
+        console.error("About data fetch failed:", error);
+      } finally {
+        setIsLoading(false);
+      }
    };
    fetchData();
  }, [locale]);
@@ -73,12 +79,22 @@ const About = () => {
                {t("title")}<span className="text-liquid-mint">.</span>
              </h2>
              <div className="prose prose-stone dark:prose-invert max-w-none text-xl md:text-2xl font-light leading-relaxed text-stone-600 dark:text-stone-400">
-                {cmsDoc ? <RichTextClient doc={cmsDoc} /> : <p>{t("p1")} {t("p2")}</p>}
+                {isLoading ? (
+                  <div className="space-y-3">
+                    <Skeleton className="h-6 w-full" />
+                    <Skeleton className="h-6 w-[95%]" />
+                    <Skeleton className="h-6 w-[90%]" />
+                  </div>
+                ) : cmsDoc ? (
+                  <RichTextClient doc={cmsDoc} />
+                ) : (
+                  <p>{t("p1")} {t("p2")}</p>
+                )}
              </div>
              <div className="pt-8">
                <div className="inline-block bg-stone-50 dark:bg-stone-800 px-8 py-4 rounded-3xl border border-stone-100 dark:border-stone-700">
                   <p className="text-[10px] font-black uppercase tracking-[0.2em] text-liquid-mint mb-2">{t("funFactTitle")}</p>
-                   <p className="text-base font-bold opacity-90">{t("funFactBody")}</p>
+                   {isLoading ? <Skeleton className="h-5 w-48" /> : <p className="text-base font-bold opacity-90">{t("funFactBody")}</p>}
                </div>
              </div>
            </div>
@@ -170,7 +186,11 @@ const About = () => {
                    <Book className="text-liquid-purple" size={20} />
                  </div>
                  <div>
+                    {isLoading ? (
+                      <Skeleton className="h-6 w-24 mb-1" />
+                    ) : (
                      <p className="text-xl font-black text-stone-900 dark:text-stone-100">{reviewsCount}+ Books</p>
+                    )}
                    <p className="text-sm text-stone-500">Read and summarized in my personal collection.</p>
                  </div>
                </div>
@@ -191,7 +211,18 @@ const About = () => {
              <Gamepad2 className="text-liquid-mint" size={32} /> Beyond Dev
            </h3>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
-              {hobbies.map((hobby) => {
+              {isLoading ? (
+                Array.from({ length: 4 }).map((_, i) => (
+                  <div key={i} className="flex items-start gap-4 p-6 bg-stone-50 dark:bg-stone-800/50 rounded-[2rem] border border-stone-100 dark:border-stone-700/50">
+                    <Skeleton className="w-10 h-10 rounded-xl shrink-0" />
+                    <div className="space-y-2 flex-1">
+                      <Skeleton className="h-4 w-24" />
+                      <Skeleton className="h-3 w-32" />
+                    </div>
+                  </div>
+                ))
+              ) : (
+                hobbies.map((hobby) => {
                  const Icon = iconMap[hobby.icon] || Lightbulb;
                  return (
                    <div key={hobby.id} className="flex items-start gap-4 p-6 bg-stone-50 dark:bg-stone-800/50 rounded-[2rem] border border-stone-100 dark:border-stone-700/50">
@@ -204,7 +235,8 @@ const About = () => {
                      </div>
                    </div>
                  )
-              })}
+                })
+              )}
            </div>
          </motion.div>

--- a/app/components/CurrentlyReading.tsx
+++ b/app/components/CurrentlyReading.tsx
@@ -5,6 +5,7 @@ import { BookOpen } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useTranslations } from "next-intl";
 import Image from "next/image";
+import { Skeleton } from "./ui/Skeleton";

 interface CurrentlyReading {
  title: string;
@@ -54,8 +55,26 @@ const CurrentlyReading = () => {
    fetchCurrentlyReading();
  }, []); // Leeres Array = nur einmal beim Mount

+  if (loading) {
+    return (
+      <div className="space-y-4">
+        <div className="flex flex-col sm:flex-row gap-4 items-start">
+          <Skeleton className="w-24 h-36 sm:w-28 sm:h-40 rounded-lg shrink-0" />
+          <div className="flex-1 space-y-3 w-full">
+            <Skeleton className="h-6 w-3/4" />
+            <Skeleton className="h-4 w-1/2" />
+            <div className="space-y-2 pt-4">
+              <Skeleton className="h-2 w-full" />
+              <Skeleton className="h-2 w-full" />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
  // Zeige nichts wenn kein Buch gelesen wird oder noch geladen wird
-  if (loading || books.length === 0) {
+  if (books.length === 0) {
    return null;
  }

--- a/app/components/Projects.tsx
+++ b/app/components/Projects.tsx
@@ -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 }}
--- a/app/components/ReadBooks.tsx
+++ b/app/components/ReadBooks.tsx
@@ -5,6 +5,7 @@ import { BookCheck, Star, ChevronDown, ChevronUp } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useLocale, useTranslations } from "next-intl";
 import Image from "next/image";
+import { Skeleton } from "./ui/Skeleton";

 interface BookReview {
  id: string;
@@ -82,7 +83,21 @@ const ReadBooks = () => {
  }, [locale]);

  if (loading) {
-    return <div className="text-stone-400 text-sm animate-pulse">Lade Buch-Bewertungen...</div>;
+    return (
+      <div className="space-y-6">
+        {[1, 2].map((i) => (
+          <div key={i} className="flex flex-col sm:flex-row gap-4 items-start">
+            <Skeleton className="w-20 h-[7.5rem] sm:w-24 sm:h-32 rounded-lg shrink-0" />
+            <div className="flex-1 space-y-2 w-full">
+              <Skeleton className="h-5 w-1/2" />
+              <Skeleton className="h-4 w-1/3" />
+              <Skeleton className="h-3 w-1/4 pt-2" />
+              <Skeleton className="h-12 w-full pt-2" />
+            </div>
+          </div>
+        ))}
+      </div>
+    );
  }

  if (reviews.length === 0) {
--- a/app/components/ui/Skeleton.tsx
+++ b/app/components/ui/Skeleton.tsx
@@ -0,0 +1,16 @@
+import { cn } from "@/lib/utils";
+
+export function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        "animate-pulse rounded-md bg-stone-200/50 dark:bg-stone-800/50",
+        className
+      )}
+      {...props}
+    />
+  );
+}