⚡UX Design

Loading States richtig machen

Nie wieder leere Seiten waehrend Daten laden

Nichts ist schlimmer als eine leere Seite die laed. Der User denkt die App ist kaputt. Mit richtigen Loading States zeigst du dass etwas passiert, und die gefuehlte Wartezeit sinkt dramatisch. Skeleton Screens sind der Goldstandard.

Pro-Tip — Der schnelle Weg

Zeig Skeletons statt Spinner. Skeletons geben dem User eine Vorstellung was gleich erscheint. Spinner sagen nur es dauert noch, Skeletons sagen hier kommt gleich Content.

Seite 1

Next.js Loading UI

Next.js App Router hat loading.tsx eingebaut. Erstell die Datei im gleichen Ordner wie deine page.tsx und sie wird automatisch waehrend des Ladens angezeigt.

// app/dashboard/loading.tsx
export default function Loading() {
return (
<div className="space-y-4 p-6">
<div className="h-8 w-48 bg-muted animate-pulse rounded" />
<div className="grid grid-cols-3 gap-4">
{[1,2,3].map(i => (
<div key={i} className="h-32 bg-muted animate-pulse rounded-xl" />
))}
</div>
</div>
)
}

Skeleton Komponente

Erstell eine wiederverwendbare Skeleton-Komponente. Die Grundform ist ein graues Rechteck mit Pulse-Animation das die Form des echten Contents nachahmt.

function Skeleton({ className }: { className?: string }) {
return (
<div className={`animate-pulse rounded-md bg-muted ${className}`} />
)
}

// Verwendung:
<Skeleton className="h-4 w-32" /> // Text
<Skeleton className="h-10 w-10 rounded-full" /> // Avatar
<Skeleton className="h-48 w-full" /> // Bild

Button Loading State

Buttons sollen beim Laden einen Spinner zeigen und deaktiviert werden. So klickt der User nicht doppelt und weiss dass etwas passiert.

<button disabled={loading} className="flex items-center gap-2">
{loading && (
<svg className="animate-spin h-4 w-4" viewBox="0 0 24 24">
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
</svg>
)}
{loading ? "Speichern..." : "Speichern"}
</button>

Suspense Boundaries

Nutz React Suspense um Loading States deklarativ zu definieren. Wrapp async Komponenten in Suspense und gib einen Fallback an.

import { Suspense } from 'react'

export default function Page() {
return (
<div>
<h1>Dashboard</h1>
<Suspense fallback={<ChartSkeleton />}>
<AsyncChart />
</Suspense>
<Suspense fallback={<TableSkeleton />}>
<AsyncTable />
</Suspense>
</div>
)
}

Seite 2

Warum das funktioniert

Skeletons reduzieren die gefuehlte Wartezeit um bis zu 50 Prozent
Next.js loading.tsx funktioniert automatisch ohne Extra-Code
Suspense Boundaries laden verschiedene Bereiche unabhaengig
Deaktivierte Buttons verhindern Doppel-Klicks und Fehler

Tipps

Skeleton-Form soll den echten Content moeglichst genau nachahmen
Spinner nur fuer kurze Aktionen, Skeletons fuer Seitenladen
useTransition in React fuer nicht-blockierende State-Updates
Teste Loading States mit React DevTools Suspense-Simulation

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