Harden RC9 UX and performance states

frontend/src/components/datasets/SourceCatalogPanel.tsx

@@ -13,6 +13,7 @@ import {
 interface SourceCatalogPanelProps {
   datasets: DatasetCreateResponse[]
   projectId?: string
+  loading?: boolean
 }
 
 const THEME_LABELS: Record<string, string> = {
@@ -75,7 +76,11 @@ function mdkStatusLabel(status: BathymetrySourceProbeRead['status']): string {
   return 'Configuratie controleren'
 }
 
-export function SourceCatalogPanel({ datasets, projectId }: SourceCatalogPanelProps): JSX.Element {
+export function SourceCatalogPanel({
+  datasets,
+  projectId,
+  loading = false,
+}: SourceCatalogPanelProps): JSX.Element {
   const [mdkProbe, setMdkProbe] = useState<BathymetrySourceProbeRead | null>(null)
   const [mdkProbeLoading, setMdkProbeLoading] = useState(false)
   const [mdkProbeError, setMdkProbeError] = useState<string | null>(null)
@@ -163,6 +168,31 @@ export function SourceCatalogPanel({ datasets, projectId }: SourceCatalogPanelPr
     }
   }
 
+  if (loading) {
+    return (
+      <section
+        className="workspace-panel source-catalog-panel"
+        aria-label="Beschikbare databronnen"
+        aria-busy="true"
+      >
+        <div className="panel-title-row">
+          <div>
+            <span className="section-kicker">Broninventaris</span>
+            <h2>Welke vragen kan GeoIntel beantwoorden?</h2>
+          </div>
+          <span className="status-badge">bronnen laden</span>
+        </div>
+        <div className="geo-bootstrap-status" role="status" aria-live="polite">
+          <span className="geo-loading-indicator" aria-hidden="true" />
+          <div>
+            <strong>Broninventaris wordt opgebouwd</strong>
+            <small>Operationele en geplande bronnen worden pas getoond wanneer de projectdata compleet is.</small>
+          </div>
+        </div>
+      </section>
+    )
+  }
+
   return (
     <section className="workspace-panel source-catalog-panel" aria-label="Beschikbare databronnen">
       <div className="panel-title-row">