로딩과 빈 결과 · Syidax Grid Docs

동작 원리와 선택 기준

앱이 데이터를 읽는 동안 loading을 켜고 성공·실패와 관계없이 종료 시 해제합니다. 빈 결과 문구는 showEmptyState와 emptyMessage로 준비하고, 요청 오류의 재시도는 앱에서 제공합니다.

코드의 grid는 설치와 연결 장에서 준비한 Grid 요소입니다. 예제마다 필요한 데이터·설정을 확인하고, 코드에서 소개하는 앱 함수와 서버 주소는 프로젝트에 맞게 구현하세요.

readOrders는 앱에서 구현한 데이터 조회 함수라고 가정합니다.

javascript

grid.loading = true;
grid.loadingMessage = '주문을 불러오고 있습니다.';
try {
  grid.rowData = await readOrders();
} finally {
  grid.loading = false;
}

결과 확인: 성공하면 표가 표시되고 실패해도 로딩 표시가 남지 않습니다. 오류는 호출한 앱에서 안내해야 합니다.

빈 배열도 정상적인 조회 결과일 수 있습니다.

javascript

grid.showEmptyState = true;
grid.emptyMessage = '조건에 맞는 주문이 없습니다. 검색 조건을 확인하세요.';
grid.rowData = [];

결과 확인: 사용자가 검색 조건을 바꿔야 하는지 알 수 있습니다. 아직 요청 중이라면 빈 상태보다 로딩 상태를 보여 주세요.

짧은 요청이 반복되면 minLoadingDuration으로 표시 시간을 조절하고, 기존 데이터 유지 여부는 앱의 업무 흐름에 맞춥니다.

결과 확인: 필터를 연속 변경할 때 이전 응답이 나중에 도착해 최신 결과를 덮어쓰지 않도록 앱의 취소·요청 순서 처리를 함께 구현합니다.

빈 데이터와 서버 오류를 같은 문구로 표현하지 마세요. 재시도 가능 여부와 실패 원인을 별도로 안내합니다.

장시간 로딩 화면에만 의존하지 말고 진행 상태·취소·재시도 등 필요한 앱 동작을 준비합니다.