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.
This commit is contained in:
ishaanxgupta 2026-06-09 17:39:35 +00:00
parent c71acbe8ae
commit 7418abbe8d
2 changed files with 22 additions and 4 deletions

View file

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

View file

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