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

---
 .../app/components/StopSummarySheetSkeleton.tsx    | 79 ----------------------
 1 file changed, 79 deletions(-)
 delete mode 100644 src/frontend/app/components/StopSummarySheetSkeleton.tsx

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

diff --git a/src/frontend/app/components/StopSummarySheetSkeleton.tsx b/src/frontend/app/components/StopSummarySheetSkeleton.tsx
deleted file mode 100644
index 7697efc..0000000
--- a/src/frontend/app/components/StopSummarySheetSkeleton.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-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