⚡Vibe Coding

Skeleton Loading States

Laden das sich schnell anfuehlt

Nichts ist schlimmer als ein weisser Bildschirm beim Laden. Skeleton Loaders zeigen die Form des Inhalts bevor er da ist. Das fuehlt sich fuer Nutzer bis zu 30 Prozent schneller an als ein Spinner.

Pro-Tip — Der schnelle Weg
Bau Skeletons die exakt die Form deines echten Contents haben. Je aehnlicher, desto weniger Layout-Shift und desto besser die Erfahrung.
Seite 1
1

Skeleton Komponente installieren

Shadcn hat eine fertige Skeleton Komponente. Sie pulsiert automatisch und du gibst nur Breite und Hoehe an.

npx shadcn@latest add skeleton
2

Basis-Skeletons bauen

Erstelle Skeletons die die Form deines Contents nachahmen. Runde Kreise fuer Avatare, Rechtecke fuer Text, grosse Bloecke fuer Bilder.

import { Skeleton } from '@/components/ui/skeleton'


function CardSkeleton() {
 return (
 <div className='flex items-center space-x-4'>
 <Skeleton className='h-12 w-12 rounded-full' />
 <div className='space-y-2'>
 <Skeleton className='h-4 w-[250px]' />
 <Skeleton className='h-4 w-[200px]' />
 </div>
 </div>
 )
}
3

Loading State umschalten

Zeige Skeleton waehrend Daten laden und wechsle zum echten Content wenn sie da sind. Nutze Suspense oder manuellen isLoading State.

function UserList() {
 const { data, isLoading } = useQuery({ queryKey: ['users'], queryFn: fetchUsers })


 if (isLoading) return <CardSkeleton />
 return <UserCard data={data} />
}
4

React Suspense nutzen

Mit Server Components kannst du Suspense Boundaries nutzen. Wickle async Komponenten in Suspense und gib eine Skeleton-Fallback an.

import { Suspense } from 'react'


<Suspense fallback={<CardSkeleton />}>
 <UserList />
</Suspense>
5

Ganze Seiten-Skeletons

Erstelle ein Skeleton fuer jede Seite deiner App. Dashboard-Skeleton, Profil-Skeleton, Listen-Skeleton. Exportiere sie als eigene Komponenten fuer Wiederverwendung.

Seite 2
Warum das funktioniert
  • Skeleton Loading fuehlt sich 30 Prozent schneller an als Spinner
  • Kein Layout-Shift wenn Content laedt weil die Platzhalter die richtige Groesse haben
  • Suspense Boundaries machen Loading States deklarativ statt imperativ
  • Professionelle Apps wie YouTube und Facebook nutzen alle Skeletons
Tipps
  • Skeleton-Groessen muessen zum echten Content passen um Layout-Shift zu vermeiden
  • Pulsier-Animation ist besser als statische graue Bloecke
  • Maximal 3 Sekunden Skeleton zeigen, danach Error State
  • Nutze Suspense Boundaries fuer automatisches Skeleton-Management
Seite 3
Bereit für den nächsten Schritt?

KIWorld VibeCoding Masterclass

Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.

Jetzt Masterclass ansehen