danabra.mov
an app to share curated trails
sidetrail.app
atproto
nextjs
react
rsc
1import "./TrailsLoading.css";
2
3export function TrailsLoading() {
4 return (
5 <div className="TrailsLoading-grid">
6 {Array.from({ length: 4 }).map((_, i) => (
7 <div key={i} className="TrailsLoading-card">
8 <div
9 className="skeleton"
10 style={{ width: "60%", height: "1.125rem", marginBottom: "0.75rem" }}
11 />
12 <div
13 className="skeleton"
14 style={{ width: "90%", height: "0.9375rem", marginBottom: "0.75rem" }}
15 />
16 <div className="TrailsLoading-meta">
17 <div className="skeleton" style={{ width: "35%", height: "0.8125rem" }} />
18 <div className="skeleton" style={{ width: "20%", height: "0.8125rem" }} />
19 </div>
20 </div>
21 ))}
22 </div>
23 );
24}