aboutsummaryrefslogtreecommitdiff
path: root/packages/memory-graph/src/components/loading-indicator.tsx
blob: bbb2312c23b01bddc6098b9930648d9afc0edda3 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
"use client"

import { GlassMenuEffect } from "@/ui/glass-effect"
import { Sparkles } from "lucide-react"
import { memo } from "react"
import type { LoadingIndicatorProps } from "@/types"
import {
	loadingContainer,
	loadingContent,
	loadingFlex,
	loadingIcon,
	loadingText,
} from "./loading-indicator.css"

export const LoadingIndicator = memo<LoadingIndicatorProps>(
	({ isLoading, isLoadingMore, totalLoaded, variant = "console" }) => {
		if (!isLoading && !isLoadingMore) return null

		return (
			<div className={loadingContainer}>
				{/* Glass effect background */}
				<GlassMenuEffect rounded="xl" />

				<div className={loadingContent}>
					<div className={loadingFlex}>
						{/*@ts-ignore */}
						<Sparkles className={loadingIcon} />
						<span className={loadingText}>
							{isLoading
								? "Loading memory graph..."
								: `Loading more documents... (${totalLoaded})`}
						</span>
					</div>
				</div>
			</div>
		)
	},
)

LoadingIndicator.displayName = "LoadingIndicator"