liquiddesign

Wzorzec 08

Wyszukiwanie bez szarpania

Wyszukiwarka zmienia widok przy każdym znaku, więc każdy błąd stabilności widać w niej natychmiast. Zapytania ogranicza debounce, wskaźnik ładowania ma miejsce w polu zamiast pod nim, a lista wyników trzyma wysokość niezależnie od liczby trafień.

Szukaj w projektach studia

Wpisz na przykład atlas, novak albo coś bez sensu. Zapytanie leci po pauzie w pisaniu, a lista trzyma wysokość dla każdej liczby trafień.

8 wyników

  • Atlas RebrandingBranding
  • Panel HeliotropAplikacja
  • Sklep Novak StudioE-commerce
  • Portfolio WrzosStrona
  • Atlas AkademiaPlatforma
  • Heliotrop RaportyAplikacja
  • Novak MagazynTreści
  • Wrzos IdentyfikacjaBranding

Reguły

  • Zapytanie leci dopiero po pauzie w pisaniu, nie po każdym znaku.
  • Wskaźnik ładowania ma zarezerwowane miejsce w polu, nie pod nim.
  • Kontener wyników trzyma wysokość dla listy, pustki i błędu.
  • Liczbę wyników ogłasza aria-live, a stan pusty proponuje korektę zapytania.

Wzorzec w kodzie

Debounce przez sprzątający useEffect, bez bibliotek
useEffect(() => {
  setSearching(true);
  const timer = setTimeout(async () => {
    setResults(await search(query));
    setSearching(false);
  }, 400);
  return () => clearTimeout(timer);
}, [query]);
Licznik w slocie i kontener o stałej wysokości
<p aria-live="polite" className="min-h-[1.5em]">
  {searching ? "Szukam…" : resultDescription(results.length)}
</p>

<div className="grid min-h-72 grid-rows-1">
  {results.length > 0 ? <List results={results} /> : <EmptyState />}
</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 „Wyszukiwanie bez szarpania" z metodologii Liquid Design.

Debounce ogranicza zapytania, wskaźnik mieszka w polu, a wyniki wymieniają się w kontenerze o stałej wysokości.

Wymagania:
- Zapytanie leci dopiero po pauzie w pisaniu, nie po każdym znaku.
- Wskaźnik ładowania ma zarezerwowane miejsce w polu, nie pod nim.
- Kontener wyników trzyma wysokość dla listy, pustki i błędu.
- Liczbę wyników ogłasza aria-live, a stan pusty proponuje korektę zapytania.

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/wyszukiwarka