package the graph (#563)shoubhit/eng-358-packaging-graph-component

includes:

- a package that contains a MemoryGraph component which handles fetching data and rendering the graph
- a playground to test the package

problems:

- the bundle size is huge
- the styles are kinda broken? we are using [https://www.npmjs.com/package/vite-plugin-libgi-inject-css](https://www.npmjs.com/package/vite-plugin-lib-inject-css) to inject the styles

![image.png](https://app.graphite.com/user-attachments/assets/cb1822c5-850a-45a2-9bfa-72b73436659f.png)

1 files changed, 40 insertions, 0 deletions

diff --git a/packages/memory-graph/src/components/loading-indicator.tsx b/packages/memory-graph/src/components/loading-indicator.tsx
new file mode 100644
index 00000000..be31430b
--- /dev/null
+++ b/packages/memory-graph/src/components/loading-indicator.tsx
@@ -0,0 +1,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";