ui: 骨架屏替代全部页面级加载 spinner
- 新增 Skeleton 组件库:Skeleton、SkeletonCircle 基础元素 + 5 个业务骨架 (SwipeDeck、ProfileCard、RecordItem、BlindboxRoom、BlindboxList、RoomCard) - 替换 room、profile、blindbox 列表、blindbox 房间、invite 5 个页面的加载态 - 替换 profile 历史记录 / 收藏列表的内联加载 spinner - 更新 project-conventions.mdc:新增 Loading States 规范, 要求页面级和列表级加载必须使用骨架屏
This commit is contained in:
@@ -35,6 +35,14 @@ alwaysApply: true
|
||||
- `overflow-y-auto scrollbar-none` for scrollable pages
|
||||
- Extract reusable UI patterns into shared components (modals, cards, empty states)
|
||||
|
||||
## Loading States
|
||||
|
||||
- **Page-level and list-level loading**: always use skeleton screens (`src/components/Skeleton.tsx`), never bare spinners
|
||||
- Skeleton shape should mimic the actual content layout (cards, list items, avatars, text lines)
|
||||
- Compose page skeletons from reusable skeleton primitives: `Skeleton`, `SkeletonCircle`, `RecordItemSkeleton`, `RoomCardSkeleton`, etc.
|
||||
- **Button-level loading** (submit, save, join): keep using inline `Loader2` spinner — skeleton screens don't apply to buttons
|
||||
- When adding a new page or async data section, always include a skeleton loading state
|
||||
|
||||
## API Routes
|
||||
|
||||
- Located in `src/app/api/`
|
||||
|
||||
Reference in New Issue
Block a user