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>

2 files changed, 52 insertions, 9 deletions

diff --git a/src/frontend/app/routes/estimates-$id.css b/src/frontend/app/routes/estimates-$id.css
index 0658156..81fba1d 100644
--- a/src/frontend/app/routes/estimates-$id.css
+++ b/src/frontend/app/routes/estimates-$id.css
@@ -268,3 +268,28 @@
 [data-theme="dark"] .experimental-notice strong {
   color: #ffd966;
 }
+
+.refresh-status {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  justify-content: center;
+  padding: 0.75rem 1rem;
+  margin-bottom: 1rem;
+  background-color: rgba(0, 123, 255, 0.1);
+  border: 1px solid rgba(0, 123, 255, 0.2);
+  border-radius: 8px;
+  color: var(--primary-color);
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+
+.refresh-status .refresh-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
+[data-theme="dark"] .refresh-status {
+  background-color: rgba(0, 123, 255, 0.15);
+  border-color: rgba(0, 123, 255, 0.3);
+}
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>