t1c.dev
forked from
rocksky.app/rocksky
A decentralized music tracking and discovery platform built on AT Protocol 🎵
Add loading skeleton to NowPlayings
tsiry-sandratraina.com
+45
apps/web/src/pages/home/nowplayings/NowPlayings.tsx
+45
apps/web/src/pages/home/nowplayings/NowPlayings.tsx
···
12
12
import { useNowPlayingsQuery } from "../../../hooks/useNowPlaying";
13
13
import styles, { getModalStyles } from "./styles";
14
14
import _ from "lodash";
15
+
import ContentLoader from "react-content-loader";
15
16
16
17
dayjs.extend(relativeTime);
17
18
dayjs.extend(utc);
···
237
238
scrollbar-width: none;
238
239
}
239
240
`}</style>
241
+
242
+
{isLoading && (
243
+
<div className="flex overflow-x-hidden">
244
+
<ContentLoader
245
+
width="100%"
246
+
height={100}
247
+
viewBox="0 0 800 100"
248
+
backgroundColor="var(--color-skeleton-background)"
249
+
foregroundColor="var(--color-skeleton-foreground)"
250
+
>
251
+
{/* Story 1 */}
252
+
<circle cx="40" cy="40" r="32" />
253
+
<rect x="16" y="85" rx="3" ry="3" width="48" height="10" />
254
+
255
+
{/* Story 2 */}
256
+
<circle cx="140" cy="40" r="32" />
257
+
<rect x="116" y="85" rx="3" ry="3" width="48" height="10" />
258
+
259
+
{/* Story 3 */}
260
+
<circle cx="240" cy="40" r="32" />
261
+
<rect x="216" y="85" rx="3" ry="3" width="48" height="10" />
262
+
263
+
{/* Story 4 */}
264
+
<circle cx="340" cy="40" r="32" />
265
+
<rect x="316" y="85" rx="3" ry="3" width="48" height="10" />
266
+
267
+
{/* Story 5 */}
268
+
<circle cx="440" cy="40" r="32" />
269
+
<rect x="416" y="85" rx="3" ry="3" width="48" height="10" />
270
+
271
+
{/* Story 6 */}
272
+
<circle cx="540" cy="40" r="32" />
273
+
<rect x="516" y="85" rx="3" ry="3" width="48" height="10" />
274
+
275
+
{/* Story 7 */}
276
+
<circle cx="640" cy="40" r="32" />
277
+
<rect x="616" y="85" rx="3" ry="3" width="48" height="10" />
278
+
279
+
{/* Story 8 */}
280
+
<circle cx="740" cy="40" r="32" />
281
+
<rect x="716" y="85" rx="3" ry="3" width="48" height="10" />
282
+
</ContentLoader>
283
+
</div>
284
+
)}
240
285
241
286
{!isLoading && (
242
287
<>