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/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>
-                    <p className="text-xl font-black text-stone-900 dark:text-stone-100">{reviewsCount}+ Books</p>
+                    {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,20 +211,32 @@ 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) => {
-                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">
-                    <div className="w-10 h-10 rounded-xl bg-white dark:bg-stone-900 flex items-center justify-center shadow-sm shrink-0">
-                      <Icon size={20} className="text-liquid-mint" />
-                    </div>
-                    <div>
-                      <p className="font-bold text-stone-900 dark:text-stone-100 text-base">{hobby.title}</p>
-                      <p className="text-xs text-stone-500 line-clamp-2">Passion & Mindset</p>
+              {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">
+                      <div className="w-10 h-10 rounded-xl bg-white dark:bg-stone-900 flex items-center justify-center shadow-sm shrink-0">
+                        <Icon size={20} className="text-liquid-mint" />
+                      </div>
+                      <div>
+                        <p className="font-bold text-stone-900 dark:text-stone-100 text-base">{hobby.title}</p>
+                        <p className="text-xs text-stone-500 line-clamp-2">Passion & Mindset</p>
+                      </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}
+    />
+  );
+}