Initial curated Unraid-AppOps-Gateway source from 3bd6f6fee310125bfbb4d4650389a817f498724d

src/components/RouteLoadingCard.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from "react";
+import { Loader2 } from "lucide-react";
+import { Card, CardContent } from "@/components/ui/card";
+import type { RouteLoadingState } from "@/lib/routeLoadingView";
+
+interface RouteLoadingCardProps {
+  state: RouteLoadingState;
+  children?: ReactNode;
+}
+
+export const RouteLoadingCard = ({ state, children }: RouteLoadingCardProps) => (
+  <Card className="signal-rail border-slate-700 bg-slate-900/60">
+    <CardContent className="space-y-5 p-5">
+      <div className="flex items-start gap-3">
+        <Loader2 className="mt-0.5 h-4 w-4 shrink-0 animate-spin text-blue-300" />
+        <div className="min-w-0">
+          <h3 className="text-sm font-bold text-slate-100">{state.title}</h3>
+          <p className="mt-1 text-sm leading-6 text-slate-400">{state.message}</p>
+        </div>
+      </div>
+      <div className="flex flex-wrap gap-2">
+        {state.facts.map((fact) => (
+          <span key={fact} className="metric-capsule text-slate-400">
+            {fact}
+          </span>
+        ))}
+      </div>
+      {children}
+    </CardContent>
+  </Card>
+);