From 80bcf4a5f29ab926c2208d5efb4c19087c600323 Mon Sep 17 00:00:00 2001
From: Ariel Costas Guerrero <ariel@costas.dev>
Date: Sun, 7 Sep 2025 19:22:28 +0200
Subject: feat: Enhance StopSheet component with error handling and loading
 states

- Added skeleton loading state to StopSheet for better UX during data fetch.
- Implemented error handling with descriptive messages for network and server errors.
- Introduced manual refresh functionality to reload stop estimates.
- Updated styles for loading and error states.
- Created StopSheetSkeleton and TimetableSkeleton components for consistent loading indicators.

feat: Improve StopList component with loading indicators and network data fetching

- Integrated loading state for StopList while fetching stops from the network.
- Added skeleton loading indicators for favourite and recent stops.
- Refactored data fetching logic to include favourite and recent stops with full data.
- Enhanced user experience with better loading and error handling.

feat: Update Timetable component with loading and error handling

- Added loading skeletons to Timetable for improved user experience.
- Implemented error handling for timetable data fetching.
- Refactored data loading logic to handle errors gracefully and provide retry options.

chore: Update package dependencies

- Upgraded react-router, lucide-react, and other dependencies to their latest versions.
- Updated types for TypeScript compatibility.
---
 .../app/components/EstimatesTableSkeleton.tsx      | 114 +++++++++++++++++++++
 1 file changed, 114 insertions(+)
 create mode 100644 src/frontend/app/components/EstimatesTableSkeleton.tsx

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

diff --git a/src/frontend/app/components/EstimatesTableSkeleton.tsx b/src/frontend/app/components/EstimatesTableSkeleton.tsx
new file mode 100644
index 0000000..2ef770b
--- /dev/null
+++ b/src/frontend/app/components/EstimatesTableSkeleton.tsx
@@ -0,0 +1,114 @@
+import React from "react";
+import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
+import "react-loading-skeleton/dist/skeleton.css";
+import { useTranslation } from "react-i18next";
+
+interface EstimatesTableSkeletonProps {
+  rows?: number;
+}
+
+export const EstimatesTableSkeleton: React.FC<EstimatesTableSkeletonProps> = ({
+  rows = 3
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <SkeletonTheme baseColor="#f0f0f0" highlightColor="#e0e0e0">
+      <table className="table">
+        <caption>
+          <Skeleton width="250px" />
+        </caption>
+
+        <thead>
+          <tr>
+            <th>{t("estimates.line", "Línea")}</th>
+            <th>{t("estimates.route", "Ruta")}</th>
+            <th>{t("estimates.arrival", "Llegada")}</th>
+            <th>{t("estimates.distance", "Distancia")}</th>
+          </tr>
+        </thead>
+
+        <tbody>
+          {Array.from({ length: rows }, (_, index) => (
+            <tr key={`skeleton-${index}`}>
+              <td>
+                <Skeleton width="40px" height="24px" style={{ borderRadius: "4px" }} />
+              </td>
+              <td>
+                <Skeleton width="120px" />
+              </td>
+              <td>
+                <div style={{ display: "flex", flexDirection: "column", gap: "2px" }}>
+                  <Skeleton width="60px" />
+                  <Skeleton width="40px" />
+                </div>
+              </td>
+              <td>
+                <Skeleton width="50px" />
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </SkeletonTheme>
+  );
+};
+
+interface EstimatesGroupedSkeletonProps {
+  groups?: number;
+  rowsPerGroup?: number;
+}
+
+export const EstimatesGroupedSkeleton: React.FC<EstimatesGroupedSkeletonProps> = ({
+  groups = 3,
+  rowsPerGroup = 2
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <SkeletonTheme baseColor="#f0f0f0" highlightColor="#e0e0e0">
+      <table className="table grouped-table">
+        <caption>
+          <Skeleton width="250px" />
+        </caption>
+
+        <thead>
+          <tr>
+            <th>{t("estimates.line", "Línea")}</th>
+            <th>{t("estimates.route", "Ruta")}</th>
+            <th>{t("estimates.arrival", "Llegada")}</th>
+            <th>{t("estimates.distance", "Distancia")}</th>
+          </tr>
+        </thead>
+
+        <tbody>
+          {Array.from({ length: groups }, (_, groupIndex) => (
+            <React.Fragment key={`group-${groupIndex}`}>
+              {Array.from({ length: rowsPerGroup }, (_, rowIndex) => (
+                <tr key={`skeleton-${groupIndex}-${rowIndex}`} className={rowIndex === 0 ? "group-start" : ""}>
+                  <td>
+                    {rowIndex === 0 && (
+                      <Skeleton width="40px" height="24px" style={{ borderRadius: "4px" }} />
+                    )}
+                  </td>
+                  <td>
+                    <Skeleton width="120px" />
+                  </td>
+                  <td>
+                    <div style={{ display: "flex", flexDirection: "column", gap: "2px" }}>
+                      <Skeleton width="60px" />
+                      <Skeleton width="40px" />
+                    </div>
+                  </td>
+                  <td>
+                    <Skeleton width="50px" />
+                  </td>
+                </tr>
+              ))}
+            </React.Fragment>
+          ))}
+        </tbody>
+      </table>
+    </SkeletonTheme>
+  );
+};
-- 
cgit v1.3