From 7418abbe8dd0f1790c6a7c3a809a71fbef92f67a Mon Sep 17 00:00:00 2001
From: ishaanxgupta <124028055+ishaanxgupta@users.noreply.github.com>
Date: Tue, 9 Jun 2026 17:39:35 +0000
Subject: [PATCH] memory graph loader (#1072)

## Summary
- Replace the memory graph page's top-left package loading indicator with a centered Supermemory loader overlay.
- Reuse the same SuperLoader animation in the graph preview card loading state.
---
 .../web/components/memory-graph/graph-card.tsx |  8 +++++++-
 .../memory-graph/memory-graph-wrapper.tsx      | 18 +++++++++++++++---
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/apps/web/components/memory-graph/graph-card.tsx b/apps/web/components/memory-graph/graph-card.tsx
index 0269aab8..de8bed3d 100644
--- a/apps/web/components/memory-graph/graph-card.tsx
+++ b/apps/web/components/memory-graph/graph-card.tsx
@@ -4,6 +4,7 @@ import { memo, useMemo } from "react"
 import { cn } from "@lib/utils"
 import { dmSansClassName } from "@/lib/fonts"
 import { Expand } from "lucide-react"
+import { SuperLoader } from "@/components/superloader"
 import { useGraphApi } from "./hooks/use-graph-api"
 import { useViewMode } from "@/lib/view-mode-context"
 
@@ -157,7 +158,12 @@ export const GraphCard = memo<GraphCardProps>(
 				<div className="flex-1 w-full relative overflow-hidden rounded-lg">
 					{isLoading ? (
 						<div className="absolute inset-0 flex items-center justify-center">
-							<div className="size-6 border-2 border-blue-400/30 border-t-blue-400 rounded-full animate-spin" />
+							<SuperLoader
+								label="Loading graph..."
+								size={40}
+								colorClassName="text-[#4BA0FA]"
+								className="[&>span]:text-[#A8B0BD]"
+							/>
 						</div>
 					) : documentCount > 0 || memoryCount > 0 ? (
 						<StaticGraphPreview
diff --git a/apps/web/components/memory-graph/memory-graph-wrapper.tsx b/apps/web/components/memory-graph/memory-graph-wrapper.tsx
index f594004f..0757b0c2 100644
--- a/apps/web/components/memory-graph/memory-graph-wrapper.tsx
+++ b/apps/web/components/memory-graph/memory-graph-wrapper.tsx
@@ -2,6 +2,7 @@
 
 import { MemoryGraph as MemoryGraphBase } from "@supermemory/memory-graph"
 import type { GraphThemeColors } from "@supermemory/memory-graph"
+import { SuperLoader } from "@/components/superloader"
 import { useGraphApi } from "./hooks/use-graph-api"
 
 export interface MemoryGraphWrapperProps {
@@ -46,14 +47,15 @@ export function MemoryGraph({
 		documentIds,
 		maxNodes,
 	})
+	const isInitialLoading = externalIsLoading || apiIsLoading
 
 	return (
 		<div className="absolute inset-0 [&>div]:!h-full [&>div]:!bg-none">
 			<MemoryGraphBase
 				documents={documents}
-				isLoading={externalIsLoading || apiIsLoading}
-				isLoadingMore={isLoadingMore}
-				onLoadMore={hasMore ? () => loadMore() : undefined}
+				isLoading={false}
+				isLoadingMore={false}
+				onLoadMore={hasMore && !isLoadingMore ? () => loadMore() : undefined}
 				hasMore={hasMore}
 				error={externalError || apiError}
 				variant={variant}
@@ -70,6 +72,16 @@ export function MemoryGraph({
 			>
 				{children}
 			</MemoryGraphBase>
+			{isInitialLoading && (
+				<div className="pointer-events-none absolute inset-0 z-40 flex items-center justify-center">
+					<SuperLoader
+						label="Loading memory graph..."
+						size={72}
+						colorClassName="text-[#4BA0FA]"
+						className="[&>span]:text-slate-100"
+					/>
+				</div>
+			)}
 		</div>
 	)
 }