supermemory/apps/web/components/graph/loading-indicator.tsx
2026-01-22 11:16:08 +05:30

28 lines
847 B
TypeScript

"use client"
import { Sparkles } from "lucide-react"
import { memo } from "react"
import type { LoadingIndicatorProps } from "./types"
export const LoadingIndicator = memo<LoadingIndicatorProps>(
({ isLoading, isLoadingMore, totalLoaded }) => {
if (!isLoading && !isLoadingMore) return null
return (
<div className="absolute top-20 right-4 z-10 bg-[#0A1628]/80 backdrop-blur-xl border border-[#1E3A5F] rounded-lg overflow-hidden">
<div className="p-3">
<div className="flex items-center gap-2">
<Sparkles className="w-4 h-4 text-cyan-400 animate-pulse" />
<span className="text-sm text-white/70">
{isLoading
? "Loading memory graph..."
: `Loading more documents... (${totalLoaded})`}
</span>
</div>
</div>
</div>
)
},
)
LoadingIndicator.displayName = "LoadingIndicator"