t1c.dev
forked from
rocksky.app/rocksky
A decentralized music tracking and discovery platform built on AT Protocol 🎵
Improve album skeleton loader
tsiry-sandratraina.com
+67
-14
apps/web/src/pages/album/Album.tsx
+67
-14
apps/web/src/pages/album/Album.tsx
···
112
<Main>
113
<div className="pb-[100px] pt-[50px]">
114
{!album && (
115
-
<ContentLoader
116
-
backgroundColor="var(--color-skeleton-background)"
117
-
foregroundColor="var(--color-skeleton-foreground)"
118
-
viewBox="100 0 850 700"
119
-
height={520}
120
-
width={700}
121
-
>
122
-
<rect x="400" y="21" rx="10" ry="10" width="694" height="20" />
123
-
<rect x="400" y="61" rx="10" ry="10" width="80" height="20" />
124
-
<rect x="500" y="-46" rx="3" ry="3" width="350" height="6" />
125
-
<rect x="471" y="-45" rx="3" ry="3" width="380" height="6" />
126
-
<rect x="484" y="-45" rx="3" ry="3" width="201" height="6" />
127
-
<rect x="10" y="21" rx="8" ry="8" width="360" height="300" />
128
-
</ContentLoader>
129
)}
130
{album && (
131
<Group>
···
112
<Main>
113
<div className="pb-[100px] pt-[50px]">
114
{!album && (
115
+
<div className="mt-[-50px]">
116
+
<ContentLoader
117
+
width="100%"
118
+
height={600}
119
+
viewBox="0 0 900 600"
120
+
backgroundColor="var(--color-skeleton-background)"
121
+
foregroundColor="var(--color-skeleton-foreground)"
122
+
>
123
+
{/* Album cover */}
124
+
<rect x="0" y="20" rx="8" ry="8" width="240" height="240" />
125
+
126
+
{/* Album title */}
127
+
<rect x="270" y="20" rx="4" ry="4" width="350" height="28" />
128
+
129
+
{/* Artist name */}
130
+
<rect x="270" y="65" rx="3" ry="3" width="220" height="20" />
131
+
132
+
{/* Listeners label */}
133
+
<rect x="270" y="120" rx="3" ry="3" width="80" height="12" />
134
+
{/* Listeners count */}
135
+
<rect x="270" y="140" rx="3" ry="3" width="100" height="18" />
136
+
137
+
{/* Scrobbles label */}
138
+
<rect x="390" y="120" rx="3" ry="3" width="80" height="12" />
139
+
{/* Scrobbles count */}
140
+
<rect x="390" y="140" rx="3" ry="3" width="100" height="18" />
141
+
142
+
{/* View on PDSls button */}
143
+
<rect x="700" y="125" rx="8" ry="8" width="180" height="48" />
144
+
145
+
{/* Genre tags */}
146
+
<rect x="270" y="185" rx="3" ry="3" width="60" height="14" />
147
+
<rect x="340" y="185" rx="3" ry="3" width="70" height="14" />
148
+
<rect x="420" y="185" rx="3" ry="3" width="55" height="14" />
149
+
150
+
{/* Track list rows */}
151
+
{/* Row 1 */}
152
+
<rect x="0" y="300" rx="3" ry="3" width="30" height="15" />
153
+
<rect x="50" y="300" rx="3" ry="3" width="500" height="15" />
154
+
<rect x="800" y="300" rx="3" ry="3" width="60" height="15" />
155
+
156
+
{/* Row 2 */}
157
+
<rect x="0" y="350" rx="3" ry="3" width="30" height="15" />
158
+
<rect x="50" y="350" rx="3" ry="3" width="500" height="15" />
159
+
<rect x="800" y="350" rx="3" ry="3" width="60" height="15" />
160
+
161
+
{/* Row 3 */}
162
+
<rect x="0" y="400" rx="3" ry="3" width="30" height="15" />
163
+
<rect x="50" y="400" rx="3" ry="3" width="500" height="15" />
164
+
<rect x="800" y="400" rx="3" ry="3" width="60" height="15" />
165
+
166
+
{/* Row 4 */}
167
+
<rect x="0" y="450" rx="3" ry="3" width="30" height="15" />
168
+
<rect x="50" y="450" rx="3" ry="3" width="500" height="15" />
169
+
<rect x="800" y="450" rx="3" ry="3" width="60" height="15" />
170
+
171
+
{/* Row 5 */}
172
+
<rect x="0" y="500" rx="3" ry="3" width="30" height="15" />
173
+
<rect x="50" y="500" rx="3" ry="3" width="500" height="15" />
174
+
<rect x="800" y="500" rx="3" ry="3" width="60" height="15" />
175
+
176
+
{/* Row 6 */}
177
+
<rect x="0" y="550" rx="3" ry="3" width="30" height="15" />
178
+
<rect x="50" y="550" rx="3" ry="3" width="500" height="15" />
179
+
<rect x="800" y="550" rx="3" ry="3" width="60" height="15" />
180
+
</ContentLoader>
181
+
</div>
182
)}
183
{album && (
184
<Group>