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.

1 files changed, 92 insertions, 5 deletions

diff --git a/src/frontend/app/components/StopSheet.css b/src/frontend/app/components/StopSheet.css
index 735e6cf..165f9fe 100644
--- a/src/frontend/app/components/StopSheet.css
+++ b/src/frontend/app/components/StopSheet.css
@@ -102,19 +102,83 @@
   color: var(--subtitle-color);
 }
 
+.stop-sheet-footer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin: 1rem 0;
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--border-color);
+}
+
+.stop-sheet-timestamp {
+  font-size: 0.8rem;
+  color: var(--subtitle-color);
+  text-align: center;
+}
+
+.stop-sheet-actions {
+  display: flex;
+  gap: 0.75rem;
+}
+
+.stop-sheet-reload {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  background: transparent;
+  border: 1px solid var(--border-color);
+  color: var(--text-color);
+  padding: 0.5rem 0.75rem;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  flex: 1;
+  justify-content: center;
+}
+
+.stop-sheet-reload:hover:not(:disabled) {
+  background: var(--message-background-color);
+  border-color: var(--button-background-color);
+}
+
+.stop-sheet-reload:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.reload-icon {
+  width: 14px;
+  height: 14px;
+  transition: transform 0.5s ease;
+}
+
+.reload-icon.spinning {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 .stop-sheet-view-all {
   display: block;
-  padding: 12px 16px;
+  padding: 0.5rem 0.75rem;
   background-color: var(--button-background-color);
   color: white;
   text-decoration: none;
   text-align: center;
-  border-radius: 8px;
+  border-radius: 6px;
   font-weight: 500;
+  font-size: 0.85rem;
   transition: background-color 0.2s ease;
-
-  margin-block-start: 1rem;
-  margin-inline-start: auto;
+  flex: 2;
 }
 
 .stop-sheet-view-all:hover {
@@ -122,6 +186,29 @@
   text-decoration: none;
 }
 
+/* Error display adjustments for sheet */
+.stop-sheet-content .error-display {
+  margin: 1rem 0;
+}
+
+.stop-sheet-content .error-display.compact {
+  min-height: 100px;
+  padding: 1rem;
+}
+
+.stop-sheet-content .error-display.compact .error-icon {
+  width: 28px;
+  height: 28px;
+}
+
+.stop-sheet-content .error-display.compact .error-title {
+  font-size: 1.1rem;
+}
+
+.stop-sheet-content .error-display.compact .error-message {
+  font-size: 0.85rem;
+}
+
 [data-rsbs-overlay] {
   background-color: rgba(0, 0, 0, 0.3);
 }