blob: 6870af28e4367e60859d4f2b3a7964e06e36959a (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
import React from "react";
import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
import "react-loading-skeleton/dist/skeleton.css";
import { useTranslation } from "react-i18next";
interface StopSheetSkeletonProps {
rows?: number;
}
export const StopSheetSkeleton: React.FC<StopSheetSkeletonProps> = ({
rows = 4
}) => {
const { t } = useTranslation();
return (
<SkeletonTheme baseColor="var(--skeleton-base)" highlightColor="var(--skeleton-highlight)">
<div className="stop-sheet-estimates">
<h3 className="stop-sheet-subtitle">
{t("estimates.next_arrivals", "Next arrivals")}
</h3>
<div className="stop-sheet-estimates-list">
{Array.from({ length: rows }, (_, index) => (
<div key={`skeleton-${index}`} className="stop-sheet-estimate-item">
<div className="stop-sheet-estimate-line">
<Skeleton width="40px" height="24px" style={{ borderRadius: "4px" }} />
</div>
<div className="stop-sheet-estimate-details">
<div className="stop-sheet-estimate-route">
<Skeleton width="120px" height="0.95rem" />
</div>
<div className="stop-sheet-estimate-time">
<Skeleton width="80px" height="0.85rem" />
</div>
</div>
</div>
))}
</div>
</div>
<div className="stop-sheet-footer">
<div className="stop-sheet-timestamp">
<Skeleton width="140px" height="0.8rem" />
</div>
<div className="stop-sheet-actions">
<div className="stop-sheet-reload" style={{
opacity: 0.6,
pointerEvents: "none"
}}>
<Skeleton width="70px" height="0.85rem" />
</div>
<div className="stop-sheet-view-all" style={{
background: "var(--service-background)",
cursor: "not-allowed",
pointerEvents: "none"
}}>
<Skeleton width="180px" height="0.85rem" />
</div>
</div>
</div>
</SkeletonTheme>
);
};
|
