Wzorzec 01

Cztery stany widoku

Widok projektowany tylko dla szczęśliwej ścieżki rozpada się przy pierwszym pustym wyniku albo błędzie sieci. W liquid design wszystkie cztery stany powstają razem, mieszkają w kontenerze o wspólnych wymiarach i wymieniają się bez śladu w otaczającym layoucie.

List projektów w czterech stanach

Przełączaj stany i obserwuj krawędź panelu. Container trzyma wymiary, więc reszta strony nawet nie wie, że coś się zmieniło.

Atlas Rebranding

Postęp: 68%

W toku

Sklep Novak Studio

Postęp: 91%

Review

Panel Heliotrop

Postęp: 100%

Gotowe

Reguły

Kontener widoku ma stałą minimalną wysokość, wspólną dla wszystkich stanów.
Stan pusty mówi, co zrobić dalej, i prowadzi do konkretnej akcji, zamiast zostawiać białą plamę.
Stan błędu zawiera przycisk ponowienia w tym samym miejscu, w którym stała treść.
Przełączenie stanu nigdy nie zmienia pozycji elementów poza kontenerem.

Wzorzec w kodzie

Unia dyskryminowana wymusza obsługę wszystkich stanów

type ViewState<T> =
  | { stan: "loading" }
  | { stan: "content"; data: T }
  | { stan: "empty" }
  | { stan: "error"; message: string };

function ProjectList({ view }: { view: ViewState<Projekt[]> }) {
  return (
    <div className="grid min-h-64 grid-rows-1">
      {view.state === "loading" && <ListSkeleton />}
      {view.state === "content" && <List projects={view.data} />}
      {view.state === "empty" && <EmptyState />}
      {view.state === "error" && <ErrorState komunikat={view.message} />}
    </div>
  );
}

Stan pusty prowadzi do akcji, nie zostawia białej plamy

function EmptyState() {
  return (
    <div className="flex flex-col items-center justify-center gap-3">
      <p className="font-semibold">Nie masz jeszcze projektów</p>
      <p className="text-sm">Załóż pierwszy albo poproś o zaproszenie.</p>
      <Button variant="secondary">Nowy projekt</Button>
    </div>
  );
}

Prompt dla Claude

Wklej do Claude Code w swoim projekcie. Prompt niesie komplet reguł tej lekcji i ogólne zasady Liquid Design, więc implementacja trafia w metodologię bez tłumaczenia jej od zera.

Prompt do wklejenia

Zaimplementuj w moim projekcie wzorzec „Cztery stany widoku" z metodologii Liquid Design.

Każdy widok danych ma cztery stany: ładowanie, treść, pustkę i błąd. Wszystkie dzielą jeden layout.

Wymagania:
- Kontener widoku ma stałą minimalną wysokość, wspólną dla wszystkich stanów.
- Stan pusty mówi, co zrobić dalej, i prowadzi do konkretnej akcji, zamiast zostawiać białą plamę.
- Stan błędu zawiera przycisk ponowienia w tym samym miejscu, w którym stała treść.
- Przełączenie stanu nigdy nie zmienia pozycji elementów poza kontenerem.

Ogólne reguły Liquid Design, których implementacja nie może złamać:
- HTML jest semantyczny: button, a, nav, form, label, dialog, details, ul, dl i nagłówki h1-h6 zamiast div z onClick i ARIA dopisywanym ręcznie. div i span służą wyłącznie do layoutu, nigdy do interakcji ani struktury treści.
- Layout jest umową: treść, która dociera później, ma miejsce zarezerwowane od pierwszego renderu. Nic nie skacze.
- Stany ładowania, pustki, błędu i treści dzielą jeden layout.
- Typografia pochodzi z nazwanej, płynnej skali opartej o clamp(), nie z gołych rozmiarów.
- Animacje dotyczą wyłącznie transform i opacity, a prefers-reduced-motion redukuje je do natychmiastowej zmiany stanu.
- Breakpoint jest ostatecznością: najpierw container queries i repeat(auto-fit, minmax(...)).

Sposób pracy – zanim napiszesz pierwszą linię kodu:
- Sprawdź w plikach projektu, jak stylowane są komponenty (Tailwind, CSS Modules, vanilla-extract, styled-components, Sass, czysty CSS...) i pisz wyłącznie w tej konwencji. Niczego nie zakładaj z góry i nie dodawaj nowych zależności.
- Wymagania powyżej opisują właściwości CSS i atrybuty HTML, nie klasy narzędziowe. Przełóż je na system stylowania zastany w projekcie.
- Sprawdź framework komponentów, wersję i konwencje nazewnictwa, zamiast zakładać konkretny stack.
- Używaj istniejących tokenów projektu (kolory, typografia, odstępy). Jeśli czegoś brakuje, zaproponuj minimalne uzupełnienie w duchu istniejącego kodu, nie osobny system.
- Nie używaj klas, tokenów ani API, których nie znalazłeś w tym projekcie.

Pełny opis z żywym demo i kodem: https://liquid-design.website/wzorce/stany-danych