From 2a9aca302485bc08f5b2dd2a54987de6f80fc338 Mon Sep 17 00:00:00 2001
From: Ariel Costas Guerrero <ariel@costas.dev>
Date: Fri, 19 Dec 2025 13:06:27 +0100
Subject: Implement loading stops as tiles from OTP

---
 .../components/map/StopSummarySheetSkeleton.tsx    | 79 ++++++++++++++++++++++
 1 file changed, 79 insertions(+)
 create mode 100644 src/frontend/app/components/map/StopSummarySheetSkeleton.tsx

(limited to 'src/frontend/app/components/map/StopSummarySheetSkeleton.tsx')

diff --git a/src/frontend/app/components/map/StopSummarySheetSkeleton.tsx b/src/frontend/app/components/map/StopSummarySheetSkeleton.tsx
new file mode 100644
index 0000000..7697efc
--- /dev/null
+++ b/src/frontend/app/components/map/StopSummarySheetSkeleton.tsx
@@ -0,0 +1,79 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
+import "react-loading-skeleton/dist/skeleton.css";
+
+interface StopSheetSkeletonProps {
+  rows?: number;
+}
+
+export const StopSummarySheetSkeleton: 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>
+  );
+};
-- 
cgit v1.3