"Lade Projekte..." als Text (Kapitel 75) FUNKTIONIERT, wirkt aber SPRUNGHAFT – Skeleton-Elemente (PLATZHALTER in der ZIELFORM des Inhalts) sind das GÄNGIGE Muster MODERNER Web-Anwendungen.

Eine Skeleton-Komponente

function ProjectListSkeleton() {
  return (
    <ul>
      {Array.from({ length: 5 }).map((_, index) => (
        <li key={index} className="skeleton-item">
          <div className="skeleton-line" style={{ width: '60%' }} />
        </li>
      ))}
    </ul>
  );
}

export default ProjectListSkeleton;

Array.from({ length: 5 }) erzeugt FÜNF Platzhalter-Zeilen, OHNE echte Daten zu benötigen – die key={index} ist HIER AUSNAHMSWEISE unproblematisch, da die Liste NIEMALS neu SORTIERT oder ERWEITERT wird, solange sie SICHTBAR ist.

Die CSS-Animation

.skeleton-line {
  height: 1rem;
  background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

In der Projektliste verwenden

function ProjectListPage() {
  const { data, isPending, isError, error } = useProjects();

  if (isPending) {
    return <ProjectListSkeleton />;
  }

  // ... Rest unverändert
}

EIN Zeilen-Austausch GEGENÜBER Kapitel 75 – isPending BLEIBT die STEUERNDE Bedingung, NUR das ANGEZEIGTE Element ändert sich, von SCHLICHTEM Text zu einer STRUKTURELL passenden Vorschau.

Wann sich Skeletons lohnen

• Bei Ladezeiten über ETWA 300-500ms – DARUNTER wirkt JEDES Ladeelement eher STÖRENDER als hilfreich.
• Wenn die ZIELSTRUKTUR des Inhalts BEKANNT ist (Liste, Karte, Tabelle) – für VÖLLIG unvorhersehbare Layouts bleibt ein einfacher Spinner die PRAGMATISCHERE Wahl.