blob: 01956ee53ae2fcf853bd4a9ffa1d1a0c799631b3 (
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
67
|
import React from "react";
import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
import "react-loading-skeleton/dist/skeleton.css";
import { useTranslation } from "react-i18next";
interface TimetableSkeletonProps {
rows?: number;
}
export const TimetableSkeleton: React.FC<TimetableSkeletonProps> = ({
rows = 4
}) => {
const { t } = useTranslation();
return (
<SkeletonTheme baseColor="#f0f0f0" highlightColor="#e0e0e0">
<div className="timetable-container">
<div className="timetable-caption">
<Skeleton width="250px" height="1.1rem" />
</div>
<div className="timetable-cards">
{Array.from({ length: rows }, (_, index) => (
<div key={`timetable-skeleton-${index}`} className="timetable-card">
<div className="card-header">
<div className="line-info">
<Skeleton width="40px" height="24px" style={{ borderRadius: "4px" }} />
</div>
<div className="destination-info">
<Skeleton width="120px" height="0.95rem" />
</div>
<div className="time-info">
<Skeleton
width="60px"
height="1.1rem"
style={{ fontFamily: "monospace" }}
/>
</div>
</div>
<div className="card-body">
<div className="route-streets">
<Skeleton
width="50px"
height="0.8rem"
style={{
display: "inline-block",
borderRadius: "3px",
marginRight: "0.5rem"
}}
/>
<Skeleton
width="200px"
height="0.85rem"
style={{ display: "inline-block" }}
/>
</div>
</div>
</div>
))}
</div>
</div>
</SkeletonTheme>
);
};
|
