scriptoriumadmin/supermemory
1
0
Fork 0
mirror of https://github.com/supermemoryai/supermemory.git synced 2026-10-06 02:47:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Use Supermemory loader in MCP widget

Browse source
This commit is contained in:
Ishaan Gupta 2026-07-02 19:40:38 +05:30
parent a09b5b6166
commit 6a85341356
2 changed files with 81 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
apps/mcp/src/widget/design/globals.css
View file

@ -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

24
apps/mcp/src/widget/views/Loading.tsx
View file

@ -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>
)
}