Navbar gefixt

src/pages/TeamDetailPage.tsx

@@ -2,6 +2,8 @@ import { useParams } from "react-router-dom";
 import { useEffect, useState } from "react";
 import { Carousel } from "react-responsive-carousel";
 import "react-responsive-carousel/lib/styles/carousel.min.css";
+import Skeleton from "react-loading-skeleton";
+import "react-loading-skeleton/dist/skeleton.css";
 
 const apiBase = import.meta.env.VITE_API_URL;
 
@@ -51,7 +53,42 @@ const TeamDetailPage = () => {
     fetchTeam();
   }, [id]);
 
-  if (loading) return <p className="text-center py-12">Lade Teamdaten...</p>;
+  if (loading) {
+    return (
+      <div className="max-w-7xl mx-auto py-8 px-4">
+        <div className="mb-8">
+          <Skeleton height={400} borderRadius={12} />
+        </div>
+
+        <div className="text-center mb-12">
+          <h1 className="text-4xl font-bold text-frog-600">
+            <Skeleton width={220} />
+          </h1>
+          <p className="text-lg text-gray-700 mt-2">
+            <Skeleton width={160} />
+          </p>
+          <p className="mt-4 text-gray-600">
+            <Skeleton count={2} />
+          </p>
+          <p className="text-sm text-frog-700 font-medium mt-2">
+            <Skeleton width={180} />
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+          {[...Array(3)].map((_, i) => (
+            <div key={i} className="bg-white rounded-lg shadow-md p-4">
+              <Skeleton height={200} className="mb-4" />
+              <Skeleton width={`60%`} height={24} />
+              <Skeleton width={`40%`} height={18} />
+              <Skeleton width={`50%`} height={14} />
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
   if (!team) return <p className="text-center py-12">Team nicht gefunden 🐸</p>;
 
   return (
@@ -89,7 +126,9 @@ const TeamDetailPage = () => {
           Training: {team.trainingszeiten || "Nicht angegeben"}
         </p>
         {team.trainingsort && (
-          <p className="text-sm text-gray-500 mt-1">Ort: {team.trainingsort}</p>
+          <p className="text-sm text-gray-500 mt-1">
+            Ort: {team.trainingsort}
+          </p>
         )}
       </div>
 
@@ -118,7 +157,9 @@ const TeamDetailPage = () => {
               alt={player.name}
               className="w-full h-108 object-cover rounded-lg mb-4"
             />
-            <h3 className="text-xl font-semibold text-frog-700">{player.name}</h3>
+            <h3 className="text-xl font-semibold text-frog-700">
+              {player.name}
+            </h3>
             <p className="text-gray-500">{player.position}</p>
             {player.nickname && (
               <p className="text-sm text-frog-500 mt-1">„{player.nickname}“</p>