From 6a853413568ac0bed06477bb2960421d0a003a79 Mon Sep 17 00:00:00 2001
From: Ishaan Gupta <ishaankone@gmail.com>
Date: Thu, 2 Jul 2026 19:40:38 +0530
Subject: [PATCH] Use Supermemory loader in MCP widget

---
 apps/mcp/src/widget/design/globals.css | 58 ++++++++++++++++++++++++++
 apps/mcp/src/widget/views/Loading.tsx  | 24 ++++++++++-
 2 files changed, 81 insertions(+), 1 deletion(-)

diff --git a/apps/mcp/src/widget/design/globals.css b/apps/mcp/src/widget/design/globals.css
index 531ff85b..52dba487 100644
--- a/apps/mcp/src/widget/design/globals.css
+++ b/apps/mcp/src/widget/design/globals.css
@@ -275,6 +275,64 @@
 	}
 }
 
+.super-loader {
+	display: inline-flex;
+	min-width: calc(var(--super-loader-size, 42px) + 10px);
+	align-items: center;
+	gap: var(--space-2);
+	color: var(--accent);
+}
+
+.super-loader-mark {
+	width: calc(var(--super-loader-size, 42px) * 0.5);
+	height: calc(var(--super-loader-size, 42px) * 0.5);
+	flex-shrink: 0;
+	overflow: visible;
+}
+
+.super-loader-path {
+	fill: none;
+	stroke: currentColor;
+	stroke-width: 1.4;
+	stroke-linecap: round;
+	stroke-linejoin: round;
+	stroke-dasharray: 1;
+	stroke-dashoffset: 1;
+	opacity: 0.2;
+	animation: super-loader-draw 0.9s ease-in-out infinite alternate;
+}
+
+.super-loader-path-left {
+	animation-delay: 0.18s;
+}
+
+.super-loader-label {
+	color: var(--text-muted);
+	font-size: calc(var(--super-loader-size, 42px) * 0.25);
+	font-weight: 500;
+	white-space: nowrap;
+}
+
+@keyframes super-loader-draw {
+	from {
+		stroke-dashoffset: 1;
+		opacity: 0.2;
+	}
+
+	to {
+		stroke-dashoffset: 0;
+		opacity: 1;
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.super-loader-path {
+		stroke-dashoffset: 0;
+		opacity: 0.7;
+		animation: none;
+	}
+}
+
 /* The graph canvas needs a definite height in both modes.
  *
  * Inline: derive height from the (stable) width via aspect-ratio — width is
diff --git a/apps/mcp/src/widget/views/Loading.tsx b/apps/mcp/src/widget/views/Loading.tsx
index e5a03cd0..499451dc 100644
--- a/apps/mcp/src/widget/views/Loading.tsx
+++ b/apps/mcp/src/widget/views/Loading.tsx
@@ -1,7 +1,29 @@
 export function Loading() {
 	return (
 		<div className="flex items-center justify-center py-(--space-12)">
-			<div className="spinner" />
+			<output
+				aria-label="Loading..."
+				className="super-loader"
+				style={{ ["--super-loader-size" as string]: "42px" }}
+			>
+				<svg
+					aria-hidden="true"
+					className="super-loader-mark"
+					viewBox="0 0 21 21"
+				>
+					<path
+						className="super-loader-path super-loader-path-right"
+						d="M3.03472 6.05861L6.8539 9.91021H1.96777V11.9737H8.3006V17.4781H10.3467V11.5057C10.3467 10.8713 10.0963 10.2621 9.65119 9.81327L4.48145 4.59961L3.03472 6.05861Z"
+						pathLength={1}
+					/>
+					<path
+						className="super-loader-path super-loader-path-left"
+						d="M12.6994 9.02793V3.52344H10.6533V9.49591C10.6533 10.1302 10.9037 10.7395 11.3488 11.1883L16.5197 16.4032L17.9665 14.9441L14.1473 11.0926H19.0334V9.02914L12.6994 9.02793Z"
+						pathLength={1}
+					/>
+				</svg>
+				<span className="super-loader-label">Loading...</span>
+			</output>
 		</div>
 	)
 }