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.
---
 src/frontend/app/routes/timetable-$id.css | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

(limited to 'src/frontend/app/routes/timetable-$id.css')

diff --git a/src/frontend/app/routes/timetable-$id.css b/src/frontend/app/routes/timetable-$id.css
index 5296615..c834633 100644
--- a/src/frontend/app/routes/timetable-$id.css
+++ b/src/frontend/app/routes/timetable-$id.css
@@ -71,19 +71,31 @@
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
+  color: var(--link-color, #007bff);
+  text-decoration: none;
+  font-weight: 500;
   padding: 0.5rem 1rem;
-  background-color: var(--button-background, #f8f9fa);
-  color: var(--text-primary, #333);
-  border: 1px solid var(--button-border, #dee2e6);
+  border: 1px solid var(--link-color, #007bff);
   border-radius: 6px;
-  font-size: 0.9rem;
-  font-weight: 500;
+  background: transparent;
   cursor: pointer;
   transition: all 0.2s ease;
 }
 
 .past-toggle:hover {
-  background-color: var(--button-hover-background, #e9ecef);
+  background-color: var(--link-color, #007bff);
+  color: white;
+  text-decoration: none;
+}
+
+.past-toggle:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.past-toggle:disabled:hover {
+  background: transparent;
+  color: var(--link-color, #007bff);
 }
 
 .past-toggle.active {
-- 
cgit v1.3