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, 55 insertions, 0 deletions

diff --git a/packages/memory-graph/src/components/loading-indicator.css.ts b/packages/memory-graph/src/components/loading-indicator.css.ts
new file mode 100644
index 00000000..09010f28
--- /dev/null
+++ b/packages/memory-graph/src/components/loading-indicator.css.ts
@@ -0,0 +1,55 @@
+import { style } from "@vanilla-extract/css";
+import { themeContract } from "../styles/theme.css";
+import { animations } from "../styles";
+
+/**
+ * Loading indicator container
+ * Positioned top-left, below spaces dropdown
+ */
+export const loadingContainer = style({
+	position: "absolute",
+	zIndex: 30, // High priority so it's visible when loading
+	borderRadius: themeContract.radii.xl,
+	overflow: "hidden",
+	top: "5.5rem", // Below spaces dropdown (~88px)
+	left: themeContract.space[4],
+});
+
+/**
+ * Content wrapper
+ */
+export const loadingContent = style({
+	position: "relative",
+	zIndex: 10,
+	color: themeContract.colors.text.secondary,
+	paddingLeft: themeContract.space[4],
+	paddingRight: themeContract.space[4],
+	paddingTop: themeContract.space[3],
+	paddingBottom: themeContract.space[3],
+});
+
+/**
+ * Flex container for icon and text
+ */
+export const loadingFlex = style({
+	display: "flex",
+	alignItems: "center",
+	gap: themeContract.space[2],
+});
+
+/**
+ * Spinning icon
+ */
+export const loadingIcon = style({
+	width: "1rem",
+	height: "1rem",
+	animation: `${animations.spin} 1s linear infinite`,
+	color: themeContract.colors.memory.border,
+});
+
+/**
+ * Loading text
+ */
+export const loadingText = style({
+	fontSize: themeContract.typography.fontSize.sm,
+});