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, 66 insertions, 0 deletions

diff --git a/src/frontend/app/components/StopSheetSkeleton.tsx b/src/frontend/app/components/StopSheetSkeleton.tsx
new file mode 100644
index 0000000..91ea74f
--- /dev/null
+++ b/src/frontend/app/components/StopSheetSkeleton.tsx
@@ -0,0 +1,66 @@
+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="#f0f0f0" highlightColor="#e0e0e0">
+      <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: "#f0f0f0", 
+            cursor: "not-allowed", 
+            pointerEvents: "none" 
+          }}>
+            <Skeleton width="180px" height="0.85rem" />
+          </div>
+        </div>
+      </div>
+    </SkeletonTheme>
+  );
+};