演示

加载、错误、空状态

TanStack Query 反馈使用 @quan-erp/shared-ui 的 LoadingState、ErrorState、EmptyState,不要手写 spinner 或空状态块。

查询反馈模式

TSXstates
1import { 2 Button, 3 EmptyState, 4 ErrorState, 5 LoadingState, 6} from "@quan-erp/shared-ui"; 7import { Plus } from "@icon-park/react"; 8 9const { data: items, refetch, isLoading, isError } = useItemsQuery(); 10 11if (isLoading) { 12 return <LoadingState message="Loading items..." />; 13} 14if (isError) { 15 return <ErrorState onRetry={refetch} error="Failed to load items." />; 16} 17if (!items?.length) { 18 return ( 19 <EmptyState 20 title="No items found" 21 description="There are no items registered yet." 22 action={ 23 <Button onClick={onCreate}> 24 <Plus /> 25 Create New 26 </Button> 27 } 28 /> 29 ); 30}