WIP PWA for Grain
docs: add profile skeleton design for layout shift fix
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
+45
+45
docs/plans/2025-12-29-profile-skeleton-design.md
+45
docs/plans/2025-12-29-profile-skeleton-design.md
···
1
+
# Profile Header Skeleton
2
+
3
+
## Problem
4
+
5
+
Fresh profile loads cause layout shift. The spinner takes minimal space (~24px), then the full header (~200px) pops in when data arrives.
6
+
7
+
## Solution
8
+
9
+
Add a skeleton loader that matches the profile header's exact dimensions.
10
+
11
+
## Component Structure
12
+
13
+
```
14
+
grain-profile-header-skeleton
15
+
├── .top-row (flex)
16
+
│ ├── .avatar-placeholder (80px circle)
17
+
│ └── .right-column (flex: 1)
18
+
│ ├── .handle-placeholder (120px × 20px bar)
19
+
│ ├── .name-placeholder (80px × 14px bar)
20
+
│ ├── .stats-placeholder (3 small boxes)
21
+
│ └── .bio-placeholder (2 lines, varying widths)
22
+
└── .button-placeholder (full-width bar for follow button)
23
+
```
24
+
25
+
## Styling
26
+
27
+
- Placeholders: `background: var(--color-bg-elevated)` with pulse animation
28
+
- Border radius: 4-8px for text bars, 50% for avatar
29
+
- Spacing: Match `grain-profile-header` exactly
30
+
- Animation: 1.5s ease-in-out infinite pulse
31
+
32
+
## File Changes
33
+
34
+
| File | Change |
35
+
|------|--------|
36
+
| `src/components/molecules/grain-profile-header-skeleton.js` | New component |
37
+
| `src/components/pages/grain-profile.js` | Swap spinner for skeleton |
38
+
39
+
## Integration
40
+
41
+
Replace spinner with skeleton in `grain-profile.js`:
42
+
43
+
```javascript
44
+
${this._loading ? html`<grain-profile-header-skeleton></grain-profile-header-skeleton>` : ''}
45
+
```