feat: add loading indicator for panorama chart

Show indeterminate progress bar while panorama data is loading.
Uses existing map-progress CSS pattern with centered layout.

Part of #772

Author: wilhel1812

src/components/PanoramaChart.tsx

@@ -249,6 +249,7 @@ export function PanoramaChart({ isExpanded, onToggleExpanded, showExpandToggle =
   const [basePanorama, setBasePanorama] = useState<PanoramaResult | null>(null);
   const [detailPanoramas, setDetailPanoramas] = useState<PanoramaResult[]>([]);
   const [panoramasReadyEpoch, setPanoramasReadyEpoch] = useState(0);
+  const [panoramaLoading, setPanoramaLoading] = useState(false);
 
   const selectedSiteEffective = useMemo(() => {
     if (!selectedSite) return null;
@@ -353,9 +354,12 @@ export function PanoramaChart({ isExpanded, onToggleExpanded, showExpandToggle =
     if (!selectedSiteEffective || !selectedNetwork) {
       setBasePanorama(null);
       setDetailPanoramas([]);
+      setPanoramaLoading(false);
       return;
     }
 
+    setPanoramaLoading(true);
+
     const effectiveLink = links[0]
       ? {
           ...links[0],
@@ -483,6 +487,7 @@ export function PanoramaChart({ isExpanded, onToggleExpanded, showExpandToggle =
           }
           setBasePanorama(result);
           setPanoramasReadyEpoch(Date.now());
+          setPanoramaLoading(false);
         },
       } satisfies LatestOnlyTask);
     }
@@ -525,6 +530,7 @@ export function PanoramaChart({ isExpanded, onToggleExpanded, showExpandToggle =
             return next.slice(-12);
           });
           setPanoramasReadyEpoch(Date.now());
+          setPanoramaLoading(false);
         },
       } satisfies LatestOnlyTask);
     }
@@ -1470,7 +1476,18 @@ export function PanoramaChart({ isExpanded, onToggleExpanded, showExpandToggle =
         ref={chartHostRef}
       >
         {!geometry || !panorama ? (
-          <div className="chart-empty" aria-hidden="true" />
+          panoramaLoading ? (
+            <div className="chart-empty chart-loading">
+              <div className="panorama-loading-indicator">
+                <div className="map-progress-track panorama-loading-track">
+                  <div className="map-progress-fill-indeterminate" />
+                </div>
+                <span className="panorama-loading-text">Loading panorama...</span>
+              </div>
+            </div>
+          ) : (
+            <div className="chart-empty" aria-hidden="true" />
+          )
         ) : (
           <>
             <canvas aria-hidden className="panorama-terrain-canvas" ref={terrainCanvasRef} />

src/index.css

@@ -2770,6 +2770,29 @@ html.panorama-gesture-lock body {
   font-size: 0.9rem;
 }
 
+.chart-loading {
+  display: grid;
+  place-items: center;
+  min-height: 120px;
+  row-gap: 12px;
+}
+
+.panorama-loading-indicator {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  row-gap: 8px;
+}
+
+.panorama-loading-track {
+  width: 120px;
+}
+
+.panorama-loading-text {
+  color: var(--muted);
+  font-size: 0.85rem;
+}
+
 .chart-grid line {
   stroke: color-mix(in srgb, var(--border) 82%, transparent);
   stroke-width: 1;