ilokesto

목록과 빈 상태

List에는 실제 row와 placeholder가 모두 필요한 경우가 많습니다. Data에는 For, fixed skeleton count에는 Repeat를 사용하세요.

import { For, Repeat, Show } from '@ilokesto/utilinent';

export function OrderList({ orders, loading }) {
  return (
    <Show when={!loading} fallback={<Repeat times={5}>{(i) => <OrderSkeleton key={i} />}</Repeat>}>
      <For each={orders} fallback={<EmptyOrders />}>
        {(order) => <OrderCard key={order.id} order={order} />}
      </For>
    </Show>
  );
}

Tips

  • 실제 data rendering과 placeholder rendering을 분리하세요.
  • Child render function에서 key를 반환하세요.
  • Semantic list markup이 중요하면 For.ul 또는 For.ol을 선호하세요.
  • Repeat는 dynamic array가 아니라 fixed count에만 사용하세요.

Async data 가이드

loading, error, empty, success UI를 utilinent component로 구조화합니다.

Polymorphic tag

Show.section, For.ul 같은 proxy tag form을 markup을 숨기지 않고 사용합니다.

목차

목록과 빈 상태
Tips