From 3227c7bc6bd233c92b1cf54bec689f0582dca547 Mon Sep 17 00:00:00 2001
From: Ariel Costas Guerrero <ariel@costas.dev>
Date: Mon, 1 Dec 2025 22:25:56 +0100
Subject: refactor: replace StopSheet with StopSummarySheet and update related
 components

- Deleted StopSheet and StopSheetSkeleton components.
- Introduced StopSummarySheet and StopSummarySheetSkeleton components.
- Updated ConsolidatedCirculationCard to support a reduced view.
- Modified ConsolidatedCirculationList to accept a reduced prop.
- Adjusted map route to use StopSummarySheet.
- Cleaned up CSS styles related to the stop sheet components.
- Enhanced error handling and loading states in the new summary sheet.
- Updated stop report logic to filter out empty next streets.
---
 src/frontend/app/components/StopSheetSkeleton.tsx | 79 -----------------------
 1 file changed, 79 deletions(-)
 delete mode 100644 src/frontend/app/components/StopSheetSkeleton.tsx

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

diff --git a/src/frontend/app/components/StopSheetSkeleton.tsx b/src/frontend/app/components/StopSheetSkeleton.tsx
deleted file mode 100644
index 3874038..0000000
--- a/src/frontend/app/components/StopSheetSkeleton.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-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>
-  );
-};
-- 
cgit v1.3