<template>
  <div class="bitable-loading-state" role="status" aria-live="polite">
    <a-skeleton :rows="rows" :title="title" active />
    <span class="bitable-loading-state__sr-only">加载中</span>
  </div>
</template>

<script setup lang="ts">
import { Skeleton as ASkeleton } from 'ant-design-vue'

withDefaults(
  defineProps<{
    // 骨架屏占位行数（默认 5 行，适配 grid/抽屉常见规模）
    rows?: number
    // 是否显示标题占位（抽屉 sticky header 用）
    title?: boolean
  }>(),
  {
    rows: 5,
    title: true,
  },
)
</script>

<style scoped>
.bitable-loading-state {
  padding: var(--bitable-spacing-lg, 16px);
}

/* 屏幕阅读器专用文本（视觉隐藏） */
.bitable-loading-state__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
</style>
