Loading

"불러오는 중"을 보여 주는 공통 모듈입니다. 서로 다른 스타일의 로더 9종(Loader)과, 화면 곳곳에 같은 방식으로 끼워 넣는LoadingState·LoadingOverlay·Skeleton·useDelayedLoading으로 이루어져 있습니다. 킷 안의 모든 로딩 화면이 이 모듈을 쓰기 때문에, meerkit.config.ts에서 한 줄만 바꾸면 서비스 전체의 로딩 모양이 바뀝니다.

Variants

9가지 스타일입니다. 색은 주변 글자색을 따라가고, 모두 부드럽게 반복됩니다. 눌러서 고르면 아래 미리보기에 적용됩니다.

가장 기본적인 회전 링. 어디에나 무난합니다.

<Loader variant="ring" size="lg" />

Loader

가장 작은 단위입니다. 글자 옆, 버튼 안, 카드 한가운데 어디든 놓을 수 있습니다. 화면에는 보이지 않는 문구가 필요하면 label을 주세요.

<Loader />                                  // config의 기본 모양
<Loader variant="dots" size="sm" />
<Loader variant="spokes" size="xl" label="저장하는 중" />

LoadingState

"불러오는 중…" 문구를 쓰던 자리에 그대로 넣는 블록입니다. 로더와 문구를 함께 보여 주고, 접근성 속성도 갖고 있습니다.minHeight를 주면 로딩이 끝나고 내용이 들어올 때 화면이 덜 흔들립니다.

<LoadingState />
<LoadingState label="멤버를 불러오는 중…" minHeight={160} />
<LoadingState layout="inline" size="sm" />

LoadingOverlay

이미 보이는 내용 위에 로더를 덮습니다. 목록을 다시 불러올 때 화면이 비지 않고, 내용이 살짝 흐려지며 로더가 나타납니다. 관리자 멤버 목록이 이 방식을 씁니다.

<LoadingOverlay loading={isFetching}>
  <MemberTable ... />
</LoadingOverlay>

Skeleton

내용이 들어올 자리를 미리 잡아 두는 회색 블록입니다. 레이아웃이 정해진 카드나 목록에 어울립니다.

<div className="flex items-center gap-3">
  <Skeleton className="size-10 rounded-full" />
  <div className="grid flex-1 gap-2">
    <Skeleton className="h-3 w-1/2" />
    <Skeleton className="h-3 w-3/4" />
  </div>
</div>

useDelayedLoading

응답이 빨라도 로더가 번쩍 나타났다 사라지면 오히려 어수선합니다. 이 훅은 250ms 안에 끝나면 아예 보여 주지 않고, 한 번 보였다면 최소 450ms는 유지합니다.

const show = useDelayedLoading(isLoading); // { delay: 250, minDuration: 450 }
return show ? <LoadingState /> : <List />;

Use it in your pages

데이터를 불러오는 화면

const { data, isLoading } = useQuery({ ... });

if (isLoading) return <LoadingState minHeight={240} />;
return <List items={data} />;

Next.js loading.tsx · Suspense

// app/dashboard/loading.tsx
import { LoadingState } from "@/meerkit";

export default function Loading() {
  return <LoadingState fullPage />;
}

// 또는 일부분만
<Suspense fallback={<LoadingState minHeight={160} />}>
  <Chart />
</Suspense>

버튼 안에서

<Button disabled={pending}>
  {pending && <Loader variant="ring" size="sm" />}
  {pending ? "저장 중…" : "저장"}
</Button>

Config

서비스 전체의 기본 모양을 한 곳에서 정합니다. 킷 안의 로딩 화면(로그인 확인, 멤버 목록, 사용량, 주소 검색 등)이 모두 따라갑니다.

export default defineMeerkitConfig({
  loading: { variant: "dots" }, // 기본 "ring"
});

Where the kit uses it

Accessibility & motion

• 로더 자체는 장식이라 스크린리더에서 숨겨지고, LoadingState와 LoadingOverlay가 role="status"로 "불러오는 중"을 알립니다.
• 순수 CSS 애니메이션이라 가볍고, 설정의 움직임 끄기와 OS의 "동작 줄이기"를 지키면 멈춘 모양으로 보입니다.
• 색은 글자색을 따르므로 라이트·다크 모드에서 따로 손볼 필요가 없습니다.