@skyhook-io/k8s-ui 1.5.6 → 1.5.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.5.6",
+  "version": "1.5.7",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",
@@ -47,7 +47,8 @@
     "./theme/tailwind-theme.css": "./src/theme/tailwind-theme.css",
     "./theme/components.css": "./src/theme/components.css",
     "./theme": "./src/theme/index.ts",
-    "./topology.css": "./src/components/topology/topology.css"
+    "./topology.css": "./src/components/topology/topology.css",
+    "./assets/radar/radar-icon-loading.svg": "./src/assets/radar/radar-icon-loading.svg"
   },
   "scripts": {
     "tsc": "tsc --noEmit",

package/src/assets/radar/radar-icon-loading.svg

@@ -0,0 +1,147 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="256" height="256">
+  <defs>
+    <!-- Dark emerald background gradient -->
+    <radialGradient id="bgHub" cx="50%" cy="50%" r="50%">
+      <stop offset="0%" stop-color="#072920"/>
+      <stop offset="70%" stop-color="#03180f"/>
+      <stop offset="100%" stop-color="#010a06"/>
+    </radialGradient>
+
+    <!-- Sweep trail gradient, emerald -->
+    <linearGradient id="sweepGlowHub" x1="0" y1="0" x2="1" y2="0" gradientTransform="rotate(-45, 0.5, 0.5)">
+      <stop offset="0%" stop-color="#10b981" stop-opacity="0"/>
+      <stop offset="60%" stop-color="#10b981" stop-opacity="0.22"/>
+      <stop offset="100%" stop-color="#a7f3d0" stop-opacity="0.55"/>
+    </linearGradient>
+
+    <!-- Ring glow -->
+    <filter id="ringGlowHub" x="-20%" y="-20%" width="140%" height="140%">
+      <feGaussianBlur stdDeviation="1.5" result="blur"/>
+      <feMerge>
+        <feMergeNode in="blur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+
+    <!-- Dot glow -->
+    <filter id="dotGlowHub" x="-100%" y="-100%" width="300%" height="300%">
+      <feGaussianBlur stdDeviation="2.5" result="blur"/>
+      <feMerge>
+        <feMergeNode in="blur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+
+    <!-- Sweep line glow -->
+    <filter id="lineGlowHub" x="-50%" y="-50%" width="200%" height="200%">
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feMerge>
+        <feMergeNode in="blur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+
+    <!-- Outer ring glow -->
+    <filter id="outerGlowHub" x="-10%" y="-10%" width="120%" height="120%">
+      <feGaussianBlur stdDeviation="4" result="blur"/>
+      <feMerge>
+        <feMergeNode in="blur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+
+    <clipPath id="radarClipHub">
+      <circle cx="128" cy="128" r="118"/>
+    </clipPath>
+
+    <!--
+      Self-contained CSS animation. This SVG is consumed via <img>, so
+      neither external CSS nor JS reaches it — keyframes have to live
+      inside the file. Sweep arm rotates around (128,128); each blip
+      pings via animation-delay timed to when the arm passes its angle
+      (cycle = 2400ms, baseline = 45° NE). Honors prefers-reduced-motion.
+    -->
+    <style>
+      .sweep-arm {
+        transform-origin: 128px 128px;
+        animation: radar-sweep 2.4s linear infinite;
+      }
+      @keyframes radar-sweep {
+        to { transform: rotate(360deg); }
+      }
+
+      .blip {
+        transform-origin: center;
+        transform-box: fill-box;
+        animation: blip-ping 2.4s linear infinite;
+      }
+      @keyframes blip-ping {
+        0%   { opacity: 1;    transform: scale(1.45); }
+        6%   { opacity: 0.95; transform: scale(1.15); }
+        25%  { opacity: 0.6;  transform: scale(1);    }
+        100% { opacity: 0.55; transform: scale(1);    }
+      }
+
+      .center-dot {
+        transform-origin: 128px 128px;
+        animation: center-pulse 2.4s ease-in-out infinite;
+      }
+      @keyframes center-pulse {
+        0%, 100% { opacity: 0.75; }
+        50%      { opacity: 1;    }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .sweep-arm,
+        .blip,
+        .center-dot { animation: none; }
+      }
+    </style>
+  </defs>
+
+  <!-- Background -->
+  <circle cx="128" cy="128" r="128" fill="#010a06"/>
+  <circle cx="128" cy="128" r="118" fill="url(#bgHub)"/>
+
+  <!-- Outer ring -->
+  <circle cx="128" cy="128" r="118" fill="none" stroke="#34d399" stroke-width="3.5" filter="url(#outerGlowHub)" opacity="0.9"/>
+
+  <!-- Concentric rings -->
+  <g filter="url(#ringGlowHub)" opacity="0.6">
+    <circle cx="128" cy="128" r="90" fill="none" stroke="#059669" stroke-width="1.2"/>
+    <circle cx="128" cy="128" r="62" fill="none" stroke="#059669" stroke-width="1.2"/>
+    <circle cx="128" cy="128" r="34" fill="none" stroke="#059669" stroke-width="1.2"/>
+  </g>
+
+  <!-- Crosshairs -->
+  <g opacity="0.15" stroke="#34d399" stroke-width="0.5">
+    <line x1="128" y1="10" x2="128" y2="246"/>
+    <line x1="10" y1="128" x2="246" y2="128"/>
+  </g>
+
+  <!-- Radar blips. animation-delay = -((360 - (angle - 45)) mod 360) / 360 * 2400ms,
+       so the 0% peak fires when the rotating sweep arm is at the blip's angle.
+       Negative delays put the animation mid-cycle at t=0 so the first paint isn't
+       a sea of bright pings. -->
+  <g filter="url(#dotGlowHub)">
+    <circle class="blip" cx="155" cy="68"  r="4"   fill="#ffffff" style="animation-delay: -140ms"/>
+    <circle class="blip" cx="178" cy="108" r="3.5" fill="#ffffff" style="animation-delay: -2247ms"/>
+    <circle class="blip" cx="98"  cy="85"  r="3"   fill="#ecfdf5" style="animation-delay: -533ms"/>
+    <circle class="blip" cx="85"  cy="155" r="3.5" fill="#ecfdf5" style="animation-delay: -1113ms"/>
+    <circle class="blip" cx="160" cy="175" r="3"   fill="#ecfdf5" style="animation-delay: -1727ms"/>
+    <circle class="blip" cx="108" cy="195" r="3.5" fill="#ecfdf5" style="animation-delay: -1387ms"/>
+  </g>
+
+  <!-- Sweep arm: trail + leading line, rotated as one group -->
+  <g class="sweep-arm">
+    <g clip-path="url(#radarClipHub)">
+      <path d="M128,128 L128,10 A118,118 0 0,1 211.5,44.5 Z" fill="url(#sweepGlowHub)" opacity="0.75"/>
+      <path d="M128,128 L211.5,44.5 A118,118 0 0,1 240,95 Z" fill="#10b981" opacity="0.06"/>
+    </g>
+    <line x1="128" y1="128" x2="211" y2="45" stroke="#a7f3d0" stroke-width="2" filter="url(#lineGlowHub)" stroke-linecap="round"/>
+    <line x1="128" y1="128" x2="211" y2="45" stroke="#ffffff" stroke-width="1" opacity="0.9" stroke-linecap="round"/>
+  </g>
+
+  <!-- Center dot -->
+  <circle class="center-dot" cx="128" cy="128" r="3" fill="#6ee7b7" filter="url(#dotGlowHub)"/>
+</svg>

package/src/components/cluster-switcher/ClusterSwitcher.tsx

@@ -0,0 +1,330 @@
+import {
+  type ReactNode,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import { ChevronDown, Check, Loader2, Search, X } from 'lucide-react'
+import { StatusDot, type StatusTone } from '../ui/status-tone'
+
+export interface ClusterSwitcherItem {
+  id: string
+  name: string
+  secondary?: string
+  badge?: string
+  group?: { key: string; label?: string }
+  disabled?: boolean
+  status?: StatusTone
+  /** Hard navigation target. Takes precedence over the parent's `onSelect`. */
+  href?: string
+  /** Tooltip — useful on disabled rows to explain why the row is inert. */
+  title?: string
+}
+
+export interface ClusterSwitcherProps {
+  currentId?: string
+  currentName: string
+  currentTooltip?: string
+  triggerIcon?: ReactNode
+  triggerPrefix?: ReactNode
+  triggerMaxWidthClass?: string
+  items: ClusterSwitcherItem[]
+  onSelect?: (item: ClusterSwitcherItem) => void
+  searchable?: boolean
+  showGroupHeaders?: boolean
+  showCurrentBullet?: boolean
+  loading?: boolean
+  disabled?: boolean
+  emptyText?: string
+  footerSlot?: ReactNode
+  errorSlot?: ReactNode
+  className?: string
+  align?: 'left' | 'right'
+}
+
+const DEFAULT_TRIGGER_MAX_WIDTH = 'max-w-[120px] sm:max-w-[220px]'
+
+export function ClusterSwitcher({
+  currentId,
+  currentName,
+  currentTooltip,
+  triggerIcon,
+  triggerPrefix,
+  triggerMaxWidthClass = DEFAULT_TRIGGER_MAX_WIDTH,
+  items,
+  onSelect,
+  searchable = true,
+  showGroupHeaders = true,
+  showCurrentBullet = true,
+  loading = false,
+  disabled = false,
+  emptyText = 'No clusters',
+  footerSlot,
+  errorSlot,
+  className = '',
+  align = 'left',
+}: ClusterSwitcherProps) {
+  const [isOpen, setIsOpen] = useState(false)
+  const [search, setSearch] = useState('')
+  const [highlightedIndex, setHighlightedIndex] = useState(-1)
+  const rootRef = useRef<HTMLDivElement>(null)
+  const searchInputRef = useRef<HTMLInputElement>(null)
+
+  const groups = useMemo(() => {
+    const q = search.trim().toLowerCase()
+    const matches = (item: ClusterSwitcherItem) => {
+      if (!q) return true
+      return (
+        item.name.toLowerCase().includes(q) ||
+        item.secondary?.toLowerCase().includes(q) ||
+        item.badge?.toLowerCase().includes(q) ||
+        item.group?.label?.toLowerCase().includes(q)
+      )
+    }
+    const map = new Map<string, { key: string; label?: string; items: ClusterSwitcherItem[] }>()
+    for (const item of items) {
+      if (!matches(item)) continue
+      const key = item.group?.key ?? ''
+      if (!map.has(key)) map.set(key, { key, label: item.group?.label, items: [] })
+      map.get(key)!.items.push(item)
+    }
+    return Array.from(map.values())
+  }, [items, search])
+
+  const flat = useMemo(() => groups.flatMap(g => g.items), [groups])
+  const indexById = useMemo(() => {
+    const m = new Map<string, number>()
+    flat.forEach((it, i) => m.set(it.id, i))
+    return m
+  }, [flat])
+
+  useEffect(() => {
+    if (!isOpen) return
+    setSearch('')
+    setHighlightedIndex(-1)
+    requestAnimationFrame(() => searchInputRef.current?.focus())
+  }, [isOpen])
+
+  useEffect(() => {
+    setHighlightedIndex(-1)
+  }, [search])
+
+  useEffect(() => {
+    if (!isOpen || highlightedIndex < 0 || !rootRef.current) return
+    const el = rootRef.current.querySelector('[data-highlighted="true"]')
+    if (el) (el as HTMLElement).scrollIntoView({ block: 'nearest' })
+  }, [highlightedIndex, isOpen])
+
+  // Listeners attach only while open so a closed switcher doesn't intercept
+  // ESC or click-outside meant for parent modals/overlays.
+  useEffect(() => {
+    if (!isOpen) return
+    function onClick(e: MouseEvent) {
+      if (rootRef.current && !rootRef.current.contains(e.target as Node)) setIsOpen(false)
+    }
+    function onEsc(e: KeyboardEvent) {
+      if (e.key === 'Escape') setIsOpen(false)
+    }
+    document.addEventListener('mousedown', onClick)
+    document.addEventListener('keydown', onEsc)
+    return () => {
+      document.removeEventListener('mousedown', onClick)
+      document.removeEventListener('keydown', onEsc)
+    }
+  }, [isOpen])
+
+  const select = (item: ClusterSwitcherItem) => {
+    if (item.disabled || item.id === currentId) return
+    setIsOpen(false)
+    if (item.href) {
+      window.location.href = item.href
+      return
+    }
+    onSelect?.(item)
+  }
+
+  const onSearchKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      setHighlightedIndex(p => (p < flat.length - 1 ? p + 1 : p))
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      setHighlightedIndex(p => (p > 0 ? p - 1 : 0))
+    } else if (e.key === 'Enter') {
+      e.preventDefault()
+      if (highlightedIndex >= 0 && flat[highlightedIndex]) select(flat[highlightedIndex])
+      else if (flat.length > 0) setHighlightedIndex(0)
+    } else if (e.key === 'Escape') {
+      e.preventDefault()
+      setIsOpen(false)
+    }
+  }
+
+  const positionClass = align === 'right' ? 'right-0 origin-top-right' : 'left-0 origin-top-left'
+
+  return (
+    <div className={`relative ${className}`} ref={rootRef}>
+      <button
+        type="button"
+        onClick={() => setIsOpen(v => !v)}
+        disabled={disabled || loading}
+        title={currentTooltip ?? currentName}
+        className={`
+          flex items-center gap-1.5 px-2.5 py-1.5
+          bg-theme-elevated border border-theme-border rounded text-sm font-medium
+          text-theme-text-primary hover:bg-theme-hover hover:border-theme-border-light
+          transition-colors cursor-pointer
+          disabled:opacity-50 disabled:cursor-not-allowed
+        `}
+      >
+        {loading ? (
+          <Loader2 className="w-3.5 h-3.5 animate-spin" />
+        ) : (
+          triggerIcon
+        )}
+        {triggerPrefix && (
+          <span className="text-theme-text-tertiary">{triggerPrefix}</span>
+        )}
+        <span className={`${triggerMaxWidthClass} truncate`}>
+          {loading ? 'Switching...' : currentName}
+        </span>
+        <ChevronDown className={`w-3 h-3 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
+      </button>
+
+      {isOpen && (
+        <div
+          className={`absolute top-full ${positionClass} mt-1 z-50 min-w-[280px] max-w-[420px] bg-theme-surface border border-theme-border-light rounded-lg shadow-xl overflow-hidden`}
+        >
+          {searchable && (
+            <div className="p-2 border-b border-theme-border">
+              <div className="relative">
+                <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-theme-text-tertiary" />
+                <input
+                  ref={searchInputRef}
+                  type="text"
+                  value={search}
+                  onChange={e => setSearch(e.target.value)}
+                  onKeyDown={onSearchKeyDown}
+                  placeholder="Search clusters..."
+                  className="w-full bg-theme-base text-theme-text-primary text-xs rounded px-2 py-1.5 pl-7 pr-7 border border-theme-border-light focus:outline-none focus:ring-1 focus:ring-[var(--color-brand)] placeholder:text-theme-text-tertiary"
+                />
+                {search && (
+                  <button
+                    type="button"
+                    onClick={() => setSearch('')}
+                    className="absolute right-2 top-1/2 -translate-y-1/2 text-theme-text-tertiary hover:text-theme-text-secondary"
+                  >
+                    <X className="w-3.5 h-3.5" />
+                  </button>
+                )}
+              </div>
+            </div>
+          )}
+
+          <div className="max-h-[400px] overflow-y-auto">
+            {flat.length === 0 ? (
+              <div className="px-3 py-6 text-center text-xs text-theme-text-tertiary">
+                {search ? `No clusters match "${search}"` : emptyText}
+              </div>
+            ) : (
+              groups.map((group, gi) => (
+                <div key={group.key || `g${gi}`}>
+                  {gi > 0 && <div className="border-t border-theme-border-light my-1" />}
+                  {showGroupHeaders && group.label && (
+                    <div className="px-3 py-1 bg-theme-elevated/60 border-b border-theme-border/60">
+                      <span className="text-[11px] text-theme-text-secondary font-semibold">
+                        {group.label}
+                      </span>
+                    </div>
+                  )}
+                  {group.items.map(item => {
+                    const idx = indexById.get(item.id) ?? -1
+                    const isCurrent = item.id === currentId
+                    return (
+                      <button
+                        type="button"
+                        key={item.id}
+                        data-highlighted={idx === highlightedIndex}
+                        onClick={() => select(item)}
+                        onMouseEnter={() => setHighlightedIndex(idx)}
+                        disabled={isCurrent || item.disabled}
+                        title={item.title}
+                        className={`
+                          w-full flex items-center gap-2 px-3 py-2 text-left transition-colors
+                          ${isCurrent
+                            ? 'selection'
+                            : idx === highlightedIndex
+                              ? 'bg-theme-hover cursor-pointer'
+                              : 'hover:bg-theme-hover cursor-pointer'}
+                          disabled:opacity-50
+                        `}
+                      >
+                        <div className="shrink-0 w-4 h-4 flex items-center justify-center">
+                          {isCurrent ? (
+                            <Check className="w-3.5 h-3.5 selection-text" />
+                          ) : showCurrentBullet ? (
+                            <div className="w-1.5 h-1.5 rounded-full bg-theme-text-tertiary/30" />
+                          ) : null}
+                        </div>
+                        {item.status && (
+                          <span className="shrink-0">
+                            <StatusDot tone={item.status} />
+                          </span>
+                        )}
+                        <div className="flex-1 min-w-0">
+                          <div className="flex items-center gap-1.5">
+                            <span
+                              className={`text-sm font-medium truncate ${
+                                isCurrent
+                                  ? 'selection-text'
+                                  : item.disabled
+                                    ? 'text-theme-text-tertiary'
+                                    : 'text-theme-text-primary'
+                              }`}
+                            >
+                              {item.name}
+                            </span>
+                            {item.badge && (
+                              <span className="shrink-0 ml-auto text-[10px] text-theme-text-tertiary bg-theme-elevated px-1 rounded">
+                                {item.badge}
+                              </span>
+                            )}
+                          </div>
+                          {item.secondary && (
+                            <div
+                              className="text-[10px] text-theme-text-tertiary opacity-70 truncate mt-0.5"
+                              title={item.secondary}
+                            >
+                              {item.secondary}
+                            </div>
+                          )}
+                        </div>
+                      </button>
+                    )
+                  })}
+                </div>
+              ))
+            )}
+          </div>
+
+          {search && flat.length > 0 && flat.length < items.length && (
+            <div className="px-3 py-1.5 text-[10px] text-theme-text-tertiary border-t border-theme-border bg-theme-base">
+              {flat.length} of {items.length} clusters
+            </div>
+          )}
+
+          {footerSlot && (
+            <div className="border-t border-theme-border bg-theme-base">{footerSlot}</div>
+          )}
+
+          {errorSlot && (
+            <div className="px-3 py-2 bg-red-500/10 border-t border-red-500/20">
+              {errorSlot}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/cluster-switcher/index.ts

@@ -0,0 +1,2 @@
+export { ClusterSwitcher } from './ClusterSwitcher'
+export type { ClusterSwitcherProps, ClusterSwitcherItem } from './ClusterSwitcher'

package/src/components/resources/ResourcesView.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useMemo, useEffect, useCallback, useRef, useContext } from 'react'
 import { TableVirtuoso, type TableVirtuosoHandle } from 'react-virtuoso'
 import { useRefreshAnimation } from '../../hooks/useRefreshAnimation'
+import { PaneLoader } from '../ui/PaneLoader'
 import type { TopPodMetrics, TopNodeMetrics } from '../../types'
 import {
   Search,
@@ -3547,9 +3548,7 @@ export function ResourcesView({
           }}
         >
           {isLoading ? (
-            <div className="absolute inset-0 flex items-center justify-center text-theme-text-tertiary">
-              Loading...
-            </div>
+            <PaneLoader className="absolute inset-0" />
           ) : isSelectedForbidden ? (
             <div className="absolute inset-0 flex flex-col items-center justify-center text-theme-text-tertiary">
               <Shield className="w-8 h-8 text-amber-400 mb-2" />

package/src/components/timeline/TimelineList.tsx

@@ -1,5 +1,6 @@
 import { useState, useMemo, useRef, useEffect } from 'react'
 import { useRefreshAnimation } from '../../hooks/useRefreshAnimation'
+import { PaneLoader } from '../ui/PaneLoader'
 import {
   AlertCircle,
   CheckCircle,
@@ -403,10 +404,7 @@ export function TimelineList({ events, isLoading, onRefresh, onQueryChange, hasL
       {/* Timeline content */}
       <div className="flex-1 overflow-auto">
         {isLoading ? (
-          <div className="flex items-center justify-center h-full text-theme-text-tertiary">
-            <RefreshCw className="w-5 h-5 animate-spin mr-2" />
-            Loading timeline...
-          </div>
+          <PaneLoader label="Loading timeline…" className="h-full" />
         ) : filteredActivity.length === 0 ? (
           <div className="flex flex-col items-center justify-center h-full text-theme-text-tertiary">
             <Clock className="w-12 h-12 mb-4 opacity-50" />

package/src/components/topology/TopologyGraph.tsx

@@ -21,6 +21,7 @@ import '@xyflow/react/dist/style.css'
 import { toCanvas } from 'html-to-image'
 
 import { AlertTriangle, Download, LayoutGrid, Loader2, Maximize, Minus, Pause, Play, Plus, RotateCw, Shield, Workflow } from 'lucide-react'
+import { PaneLoader } from '../ui/PaneLoader'
 import { Tooltip } from '../ui/Tooltip'
 import { useToast } from '../ui/Toast'
 import { useRegisterShortcuts } from '../../hooks/useKeyboardShortcuts'
@@ -653,14 +654,7 @@ export function TopologyGraph({
   }, [selectedNodeId, setNodes])
 
   if (!topology) {
-    return (
-      <div className="flex-1 flex items-center justify-center text-theme-text-secondary">
-        <div className="text-center">
-          <Loader2 className="w-6 h-6 animate-spin mx-auto mb-2 opacity-50" />
-          <p className="text-sm">Loading topology...</p>
-        </div>
-      </div>
-    )
+    return <PaneLoader label="Loading topology…" className="flex-1" />
   }
 
   if (topology.nodes.length === 0) {

package/src/components/ui/PaneLoader.tsx

@@ -0,0 +1,21 @@
+import radarLoadingIcon from '../../assets/radar/radar-icon-loading.svg'
+
+// PaneLoader — center-of-pane loading state. Animated radar icon stacked
+// above a label so swapping the label across the loading chain doesn't
+// shift the icon horizontally. Pin to the parent's fill via `className`
+// (`flex-1`, `h-full`, `h-32`, `absolute inset-0`, etc.). The SVG self-
+// animates (sweep arm + blips, `prefers-reduced-motion` honored).
+export function PaneLoader({
+  label = 'Loading…',
+  className = '',
+}: {
+  label?: string
+  className?: string
+}) {
+  return (
+    <div className={`flex flex-col items-center justify-center gap-3 ${className}`}>
+      <img src={radarLoadingIcon} alt="" aria-hidden className="w-11 h-11" />
+      <span className="text-sm text-theme-text-tertiary">{label}</span>
+    </div>
+  )
+}

package/src/components/ui/index.ts

@@ -1,4 +1,5 @@
 export { Tooltip } from './Tooltip'
+export { PaneLoader } from './PaneLoader'
 export { ClusterName } from './ClusterName'
 export { EmptyState } from './EmptyState'
 export type { EmptyStateTone, EmptyStateVariant } from './EmptyState'

package/src/components/workload/WorkloadView.tsx

@@ -1,6 +1,7 @@
 import { useState, useMemo, useEffect, useRef, useCallback, type ReactNode } from 'react'
 import { flushSync } from 'react-dom'
 import { useRefreshAnimation } from '../../hooks/useRefreshAnimation'
+import { PaneLoader } from '../ui/PaneLoader'
 import { useRegisterShortcuts } from '../../hooks/useKeyboardShortcuts'
 import { clsx } from 'clsx'
 import {
@@ -426,7 +427,7 @@ export function WorkloadView({
         {/* Content — viewTransitionName scopes View Transitions API cross-fade to this element */}
         <div className="flex-1 overflow-y-auto" style={{ viewTransitionName: 'drawer-content' }}>
           {resourceLoading ? (
-            <div className="flex items-center justify-center h-32 text-theme-text-tertiary">Loading...</div>
+            <PaneLoader className="h-32" />
           ) : !resource ? (
             <div className="flex items-center justify-center h-32 text-theme-text-tertiary">Resource not found</div>
           ) : showYaml ? (
@@ -640,7 +641,7 @@ export function WorkloadView({
         {activeTab === 'yaml' && (
           <div className="h-full overflow-auto">
             {resourceLoading ? (
-              <div className="flex items-center justify-center h-32 text-theme-text-tertiary">Loading...</div>
+              <PaneLoader className="h-32" />
             ) : !resource ? (
               <div className="flex items-center justify-center h-32 text-theme-text-tertiary">Resource not found</div>
             ) : (
@@ -1105,12 +1106,7 @@ function InfoTab({
   extraContent?: ReactNode
 }) {
   if (isLoading) {
-    return (
-      <div className="flex items-center justify-center h-full text-theme-text-tertiary">
-        <RefreshCw className="w-5 h-5 animate-spin mr-2" />
-        Loading...
-      </div>
-    )
+    return <PaneLoader className="h-full" />
   }
 
   if (!resource) {

package/src/index.ts

@@ -36,3 +36,6 @@ export * from './components/topology'
 
 // Cluster audit (AuditCard, AuditAlerts, AuditFindingsTable)
 export * from './components/audit'
+
+// Cluster switcher (shared trigger+dropdown for OSS Radar and Radar Hub)
+export * from './components/cluster-switcher'