WIP PWA for Grain
fix: update skeleton to match actual profile header layout
- Full width
- Handle row with menu icon placeholder
- Proper sizing for handle, name, stats, bio
- Remove button (conditional in real component)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
+25
-24
+25
-24
src/components/molecules/grain-profile-header-skeleton.js
+25
-24
src/components/molecules/grain-profile-header-skeleton.js
···
4
4
static styles = css`
5
5
:host {
6
6
display: block;
7
+
width: 100%;
7
8
padding: var(--space-md) var(--space-sm);
8
9
}
9
10
@media (min-width: 600px) {
···
34
35
border-radius: 50%;
35
36
flex-shrink: 0;
36
37
}
38
+
.handle-row {
39
+
display: flex;
40
+
align-items: center;
41
+
gap: var(--space-sm);
42
+
margin-bottom: var(--space-xs);
43
+
}
37
44
.handle {
38
-
width: 120px;
45
+
width: 140px;
46
+
height: 22px;
47
+
}
48
+
.menu-icon {
49
+
width: 20px;
39
50
height: 20px;
40
-
margin-bottom: var(--space-xs);
51
+
border-radius: 50%;
41
52
}
42
53
.name {
43
-
width: 80px;
44
-
height: 14px;
54
+
width: 90px;
55
+
height: 16px;
45
56
margin-bottom: var(--space-xs);
46
57
}
47
58
.stats {
···
50
61
margin-bottom: var(--space-xs);
51
62
}
52
63
.stat {
53
-
width: 70px;
54
-
height: 14px;
64
+
width: 85px;
65
+
height: 16px;
55
66
}
56
-
.bio-line {
57
-
height: 14px;
67
+
.bio {
68
+
width: 180px;
69
+
height: 16px;
58
70
margin-top: var(--space-xs);
59
71
}
60
-
.bio-line:first-of-type {
61
-
width: 100%;
62
-
}
63
-
.bio-line:last-of-type {
64
-
width: 60%;
65
-
}
66
-
.button {
67
-
width: 100%;
68
-
height: 40px;
69
-
border-radius: 8px;
70
-
margin-top: var(--space-sm);
71
-
}
72
72
@keyframes pulse {
73
73
0%, 100% { opacity: 0.4; }
74
74
50% { opacity: 1; }
···
80
80
<div class="top-row">
81
81
<div class="placeholder avatar"></div>
82
82
<div class="right-column">
83
-
<div class="placeholder handle"></div>
83
+
<div class="handle-row">
84
+
<div class="placeholder handle"></div>
85
+
<div class="placeholder menu-icon"></div>
86
+
</div>
84
87
<div class="placeholder name"></div>
85
88
<div class="stats">
86
89
<div class="placeholder stat"></div>
87
90
<div class="placeholder stat"></div>
88
91
<div class="placeholder stat"></div>
89
92
</div>
90
-
<div class="placeholder bio-line"></div>
91
-
<div class="placeholder bio-line"></div>
93
+
<div class="placeholder bio"></div>
92
94
</div>
93
95
</div>
94
-
<div class="placeholder button"></div>
95
96
`;
96
97
}
97
98
}