Loader

Loader

로딩 상태를 표시하는 컴포넌트예요. Loader 컴포넌트는 기본적으로 oval, bars, dots 세 가지 로더 유형을 지원하며, 모든 로더는 성능을 위해 CSS로 애니메이션 처리돼요.

출처: 문서

본문

사용법 (Usage)

Loader 컴포넌트는 기본적으로 oval, bars, dots 세 가지 유형의 로더를 지원해요. 모든 로더는 더 나은 성능을 위해 CSS로 애니메이션 처리돼요.

import { Loader } from '@mantine/core';

function Demo() {
  return <Loader />;
}

color와 size prop으로 색상과 크기를 조절할 수 있어요.

size prop

size prop에는 유효한 CSS 값이나 숫자를 전달할 수 있어요. 숫자는 px로 취급되지만 rem으로 변환돼요. 예를 들어 size={32}는 --loader-size: 2rem CSS 변수를 만들어 내요.

import { Loader } from '@mantine/core';

function Demo() {
  return <Loader size={32} />;
}

사용자 정의 로더 추가하기 (Adding custom loaders)

Loader 컴포넌트는 다른 컴포넌트(Button, ActionIcon, LoadingOverlay 등)에서도 사용돼요. default props로 type을 설정해 로더 유형을 바꿀 수 있고, loaders default prop으로 커스텀 CSS나 SVG 로더를 추가할 수도 있어요.

CSS 전용 로더 (Custom CSS only loader)

size와 color prop이 커스텀 로더에서 동작하려면 로더 스타일에 --loader-size와 --loader-color CSS 변수를 사용해야 해요.

import { MantineProvider, Loader } from '@mantine/core';
import { CssLoader } from './CssLoader';

const theme = createTheme({
  components: {
    Loader: Loader.extend({
      defaultProps: {
        loaders: { ...Loader.defaultLoaders, custom: CssLoader },
        type: 'custom',
      },
    }),
  },
});

커스텀 SVG 로더 (Custom SVG loader)

SVG 기반 애니메이션은 다음 문제가 있을 수 있으므로 CSS 전용 로더를 권장해요.

• CPU 사용량이 높아 저사양 기기에서는 로더가 끊겨 보일 수 있어요
• JS가 로드될 때까지 애니메이션이 시작되지 않아 정적 로더가 보일 수 있어요

SVG 로더에서도 size와 color prop이 동작하도록 CSS 전용 로더와 같은 방식으로 --loader-size와 --loader-color 변수를 사용해야 해요. 보통 width와 height를 var(--loader-size)로, fill/stroke를 var(--loader-color)로 설정하면 돼요.

children prop

Loader는 children prop을 지원해요. children에 값을 전달하면 로더 대신 그 값이 렌더링돼요. 이는 loaderProps를 사용하는 컴포넌트(예: Button, LoadingOverlay, Dropzone)에서 Loader의 표현을 제어하고자 할 때 유용해요.

import { useDisclosure } from '@mantine/hooks';
import { LoadingOverlay, Button, Group, Box } from '@mantine/core';

function Demo() {
  const [visible, { toggle }] = useDisclosure(false);

  return (
    <>
      <Box pos="relative">
        <LoadingOverlay visible={visible} loaderProps={{ children: 'Loading...' }} />
        {/* ...other content */}
      </Box>

      <Group justify="center">
        <Button onClick={toggle}>Toggle overlay</Button>
      </Group>
    </>
  );
}

더 알아보기 (Learn more)

• Button
• ActionIcon
• LoadingOverlay
• Notification
• EmptyState