Add loading states, error handling, and refresh feedback to stops-$id page (#89)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: arielcostas <94913521+arielcostas@users.noreply.github.com>

1 files changed, 27 insertions, 9 deletions

diff --git a/src/frontend/app/routes/stops-$id.tsx b/src/frontend/app/routes/stops-$id.tsx
index 7d533a5..86e74d9 100644
--- a/src/frontend/app/routes/stops-$id.tsx
+++ b/src/frontend/app/routes/stops-$id.tsx
@@ -11,6 +11,8 @@ import { type RegionId, getRegionConfig } from "~/data/RegionConfig";
 import { StopAlert } from "~/components/StopAlert";
 import LineIcon from "~/components/LineIcon";
 import { ConsolidatedCirculationList } from "~/components/Stops/ConsolidatedCirculationList";
+import { ConsolidatedCirculationListSkeleton } from "~/components/Stops/ConsolidatedCirculationListSkeleton";
+import { ErrorDisplay } from "~/components/ErrorDisplay";
 
 export interface ConsolidatedCirculation {
   line: string;
@@ -197,7 +199,7 @@ export default function Estimates() {
           </div>
 
           <div className="table-responsive">
-            {/* TODO: Implement skeleton */}
+            <ConsolidatedCirculationListSkeleton />
           </div>
         </div>
       </PullToRefresh>
@@ -255,17 +257,33 @@ export default function Estimates() {
           </p>
         </div>
 
+        {(isManualRefreshing || dataLoading) && (
+          <div className="refresh-status">
+            <RefreshCw className="refresh-icon spinning" />
+            <span>{t("estimates.refreshing", "Actualizando datos...")}</span>
+          </div>
+        )}
+
         {stopData && <StopAlert stop={stopData} />}
 
         <div className="table-responsive">
-          {data ? (
-            <>
-              <ConsolidatedCirculationList
-                data={data}
-                dataDate={dataDate}
-                regionConfig={regionConfig}
-              />
-            </>
+          {dataLoading ? (
+            <ConsolidatedCirculationListSkeleton />
+          ) : dataError ? (
+            <ErrorDisplay
+              error={dataError}
+              onRetry={loadData}
+              title={t(
+                "errors.estimates_title",
+                "Error al cargar estimaciones",
+              )}
+            />
+          ) : data ? (
+            <ConsolidatedCirculationList
+              data={data}
+              dataDate={dataDate}
+              regionConfig={regionConfig}
+            />
           ) : null}
         </div>
       </div>