reopt designreopt design
DocsExploreToolsPricingBuilder
Login
Explore/
opt-ui205opt-charts40opt-datagrid9opt-editor5opt-calendar4opt-filemanager4opt-chat6opt-shell14brandapp-ui8Examples12Builder Blocks
Overview205Core74Shells99Blocks32
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • GitHub
  • About
  • Contact
  • Terms of Service
  • Privacy Policy

reopt Inc.Business registration no. 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

Explore/Core/LoadingOverlay

LoadingOverlay

Component

로딩 오버레이. 중복 status 없이 하나의 aria-busy 라이브 영역으로 콘텐츠 위 로딩 상태를 표시합니다.

feedbackindicator
Related docs
bun add @reopt-ai/opt-ui
100%

기본 사용

콘텐츠 영역

이 영역 위에 로딩 오버레이가 표시됩니다.

LoadingOverlay

PropTypeDefaultDescription
loading*boolean—로딩 상태
children*ReactNode—감싸는 콘텐츠
labelstring"Loading…"로딩 텍스트

컴포넌트 의존 관계

깊이
▲ USED BY (26)▼ USES (1)sql-workspacealert-managerretention-analysisbilling-pageproject-settingsanalytics-dashboardrealtime-dashboardsegment-manageruser-exploreracquisition-analysisfunnel-analysisbreakdown-analysiscohort-comparisoncustom-dashboarddebug-workspacevisual-diff-managertest-analyticsuser-detailinsights-dashboardproject-overviewdata-explorerproject-dashboardsettings-paneltask-dashboarddeployment-centerchat-assistantLoadingOverlayspinner
View test results

테스트 커버리지

2026년 7월 9일3/3 통과
3성공
0실패
3전체
  • loading=false일 때 콘텐츠만 표시한다
  • loading=true일 때 오버레이를 표시한다
  • 커스텀 label을 표시한다

Blocks that use this component

AcquisitionAnalysis

획득 분석 Surface. 3탭(Overview, Channels, Campaigns) + StatCard + LineChart + DataTable 조합.

Analytics

AlertManager

알림 관리 Surface. DataTable + AlertBuilder 조합.

Feedback

AnalyticsDashboard

분석 대시보드 Surface. StatCard + LineChart + BarChart 조합.

Analytics

BillingPage

빌링 페이지 Surface. StatCard + BarChart + DataTable 조합.

Analytics

BreakdownAnalysis

분석 Surface. 4탭(Trend, Distribution, Composition, Data) + 다중 차트 + DataTable 조합.

Analytics

ChatAssistant

AI 챗봇 어시스턴트 화면. ChatSidebar + ChatMessageList + ChatInput 조합.

Chat

CohortComparison

코호트 비교 Surface. ComparisonChart + RetentionHeatmap + DataTable + N-cohort 지원 (최대 5개). 4탭 조합.

Analytics

CustomDashboard

커스텀 대시보드 Surface. WidgetGrid + ReportBuilder + ReportWidget + FilterBar 조합.

Display

DataExplorer

필터링 가능한 데이터 탐색 영역. `spacing="group"` BlockLayout 안에서 SearchCombobox + StatusSelect + DataTable을 조합.

Data

DebugWorkspace

E2E 테스트 디버깅 워크스페이스. 2-pane 레이아웃 — 사이드바 테스트 목록 + 탭 콘텐츠 뷰어 (Video/Screenshots/Network/Console/Trace).

Display

DeploymentCenter

배포 관리 통합 대시보드. BranchSelect + StatusSelect + QuickActions + DeploymentTimeline + DomainTable + EnvPanel 조합.

Workflow

FunnelAnalysis

퍼널 분석 Surface. StepBuilder + 3탭(Funnel, Breakdown, Trend) + FunnelChart + DataTable 조합.

Analytics

InsightsDashboard

인사이트 대시보드 Surface. InsightsPanel 래핑 + 탐지 실행, 시간 범위 필터, 에러 표시, dismissed 토글, 탐지 메서드/파라미터 제어.

Analytics

ProjectDashboard

Vercel 스타일 프로젝트 개요 영역. DashboardGrid + DeploymentTimeline + EnvPanel 조합.

ProjectOverview

프로젝트 개요 Surface. SummaryRow + NavCards + LineChart + BarChart + DataTable + CodeSnippetViewer + Dashboard CRUD 조합.

Display

ProjectSettings

프로젝트 설정 Surface. SettingsForm + DataTable + CodeSnippetViewer + Retention Policy + Cleanup Preview + Storage Usage 조합.

Display

RealtimeDashboard

실시간 대시보드 Surface. ConnectionIndicator + StatCard + ActivityFeed 조합.

Analytics

RetentionAnalysis

리텐션 히트맵 분석 Surface. RetentionHeatmap 래퍼.

Analytics

SegmentManager

세그먼트 관리 Surface. DataTable + SegmentBuilder 조합.

Filter

SettingsPanel

설정 페이지의 사이드바 + 콘텐츠 레이아웃. SidebarNav + children 슬롯 조합.

SqlWorkspace

SQL 에디터 + 쿼리 결과 테이블. SqlEditor와 QueryResultsTable 조합.

Editor

TaskDashboard

작업 관리 대시보드. TaskList + ActivityFeed + TeamMemberList + QuickActions + FilterBar 조합.

Workflow

TestAnalytics

다차원 테스트 품질 분석 대시보드. Summary cards + 6-tab multi-chart (Overview/Stability/Failures/Flaky/Performance/Advanced).

AnalyticsDisplay

UserDetail

사용자 상세 프로필 Surface. Avatar + StatCard + GaugeChart + Progress + DataTable + FilterBar 조합.

Display

UserExplorer

사용자 탐색 Surface. DataTable + FilterBar 조합.

Filter

VisualDiffManager

스크린샷 비주얼 리그레션 관리 + 승인 워크플로우. 3-column 레이아웃 — 스냅샷 리스트 + 이미지 diff 뷰어.

Display

Related components

Spinner

로딩 상태 표시 스피너. 3가지 크기와 장식용 aria-hidden 모드를 지원합니다.

Indicator

Alert

알림 메시지 컴포넌트. 4가지 변형(info, success, warning, error), 제목/본문/닫기 버튼 지원.

FeedbackIndicator

Kbd

키보드 단축키를 시각적으로 표시하는 인라인 뱃지 컴포넌트.

Indicator

StatCard

단일 지표를 값·변화량·보조 설명으로 표시하는 통계 카드. 비교 기준이 없으면 변화량 줄을 렌더하지 않는다.

Indicator

CompositeZone

Composite 기반 2D 키보드 탐색 컨테이너. 화살표 키로 자식 요소 간 이동 가능.

Indicator

Tabs

탭 패널 시스템. 4-part anatomy: Root, TabList, Tab, TabPanel.

NavIndicator
PreviousVirtualListNextStarRating