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

diff --git a/src/frontend/app/components/StopItemSkeleton.tsx b/src/frontend/app/components/StopItemSkeleton.tsx
new file mode 100644
index 0000000..72f7506
--- /dev/null
+++ b/src/frontend/app/components/StopItemSkeleton.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
+import "react-loading-skeleton/dist/skeleton.css";
+
+interface StopItemSkeletonProps {
+    showId?: boolean;
+    stopId?: number;
+}
+
+const StopItemSkeleton: React.FC<StopItemSkeletonProps> = ({
+    showId = false,
+    stopId
+}) => {
+    return (
+        <SkeletonTheme baseColor="#f0f0f0" highlightColor="#e0e0e0">
+            <li className="list-item">
+                <div className="list-item-link">
+                    <span>
+                        {showId && stopId && (
+                            <>({stopId}) </>
+                        )}
+                    </span>
+                    <Skeleton
+                        width={showId ? "60%" : "80%"}
+                        style={{ display: "inline-block" }}
+                    />
+                    <div className="line-icons" style={{ marginTop: "4px" }}>
+                        <Skeleton
+                            count={3}
+                            width="30px"
+                            height="20px"
+                            inline={true}
+                            style={{ marginRight: "0.5rem" }}
+                        />
+                    </div>
+                </div>
+            </li>
+        </SkeletonTheme>
+    );
+};
+
+export default StopItemSkeleton;