fix: loading for components

Author: izadoesdev

.agents/skills/databuddy/SKILL.md

@@ -128,7 +128,7 @@ Read [codebase-map.md](./references/codebase-map.md) when you need deeper routin
 - **AI SDK UI (`useChat`)** does not document automatic HTTP retries on `DefaultChatTransport`—retry UX is **`regenerate()`** + `error` ([chatbot error state](https://ai-sdk.dev/docs/ai-sdk-ui/chatbot#error-state), [error handling](https://ai-sdk.dev/docs/ai-sdk-ui/error-handling)). `maxRetries` on **`streamText`/`generateText`** is server-side model calls, not the browser chat `fetch`. Mid-stream disconnect: **`resumeStream()`** ([useChat](https://ai-sdk.dev/docs/reference/ai-sdk-ui/use-chat)).
 - **`@elysiajs/cors` with `origin: true`** sets `Vary: *`, killing CDN caching. Override with `set.headers.vary = "Origin"` on cacheable public endpoints.
 - **`applyAuthWideEvent`** in `apps/api/src/index.ts` runs a session DB lookup on every request including anonymous `/public/` routes. Skip it for public endpoints via URL check in `onBeforeHandle`.
-- **Agent SQL security**: Tenant isolation (`client_id`) is enforced programmatically in `validateAgentSQL` + `requiresTenantFilter` from `@databuddy/db`. Never rely solely on system-prompt instructions for data isolation. All three SQL tool copies (API, RPC, private) must use the shared validation from `packages/db/src/clickhouse/sql-validation.ts`.
+- **Agent SQL security**: Tenant isolation (`client_id`) is enforced programmatically in `validateAgentSQL` + `requiresTenantFilter` from `@databuddy/db`. Never rely solely on system-prompt instructions for data isolation. Every SQL tool entry point (API, RPC, etc.) must use the shared validation from `packages/db/src/clickhouse/sql-validation.ts`.
 - **ClickHouse table allowlist**: Agent SQL is restricted to `analytics.*` tables only. `system.*`, `information_schema.*` are blocked. Add new allowed prefixes in `sql-validation.ts` if new databases are added.
 - **Flags API local dev** requires `dotenv -e .env` from repo root to pick up `REDIS_URL`, `DATABASE_URL`, etc.
 - **Node SDK flags**: The export is `createServerFlagsManager` (not `createFlagsManager`). Call `waitForInit()` before use.

apps/dashboard/components/ai-elements/ai-component.tsx

@@ -5,6 +5,45 @@ import {
 	hasComponent,
 	type RawComponentInput,
 } from "@/lib/ai-components";
+import { Skeleton } from "@/components/ui/skeleton";
+import { chartSurfaceClassName } from "@/lib/chart-presentation";
+
+const SKELETON_LABELS: Record<string, string> = {
+	"line-chart": "Loading chart...",
+	"bar-chart": "Loading chart...",
+	"area-chart": "Loading chart...",
+	"stacked-bar-chart": "Loading chart...",
+	"pie-chart": "Loading chart...",
+	"donut-chart": "Loading chart...",
+	"data-table": "Loading table...",
+	"referrers-list": "Loading referrers...",
+	"mini-map": "Loading map...",
+	"links-list": "Loading links...",
+	"link-preview": "Loading preview...",
+	"funnels-list": "Loading funnels...",
+	"funnel-preview": "Loading preview...",
+	"goals-list": "Loading goals...",
+	"goal-preview": "Loading preview...",
+	"annotations-list": "Loading annotations...",
+	"annotation-preview": "Loading preview...",
+};
+
+function ComponentSkeleton({ type, title }: { type: string; title?: string }) {
+	const label = SKELETON_LABELS[type] ?? "Loading...";
+	return (
+		<div className={chartSurfaceClassName}>
+			<div className="dotted-bg bg-accent">
+				<Skeleton className="h-[120px] w-full rounded-none" />
+			</div>
+			<div className="flex items-center gap-2.5 border-t px-3 py-2">
+				<p className="min-w-0 flex-1 truncate text-muted-foreground text-sm">
+					{title ?? label}
+				</p>
+				<div className="h-0.5 w-12 animate-pulse rounded bg-primary/30" />
+			</div>
+		</div>
+	);
+}
 
 interface AIComponentProps {
 	input: RawComponentInput;
@@ -14,7 +53,8 @@ interface AIComponentProps {
 
 /**
  * Renders an AI-generated component based on its type.
- * Looks up the component definition in the registry and renders it.
+ * During streaming, skips strict validation and shows a skeleton
+ * if the data is too incomplete to render.
  */
 export function AIComponent({ input, className, streaming }: AIComponentProps) {
 	if (!hasComponent(input.type)) {
@@ -26,12 +66,33 @@ export function AIComponent({ input, className, streaming }: AIComponentProps) {
 		return null;
 	}
 
+	// During streaming, try to render with whatever data we have.
+	// If validation or transform fails, show a typed skeleton instead of nothing.
+	if (streaming) {
+		if (definition.validate(input)) {
+			try {
+				const props = definition.transform(input);
+				const Component = definition.component;
+				return <Component {...props} className={className} streaming />;
+			} catch {
+				// Transform failed on partial data — show skeleton
+			}
+		}
+		return (
+			<ComponentSkeleton
+				type={input.type}
+				title={typeof input.title === "string" ? input.title : undefined}
+			/>
+		);
+	}
+
+	// Complete mode: strict validation
 	if (!definition.validate(input)) {
 		return null;
 	}
 
 	const props = definition.transform(input);
 	const Component = definition.component;
 
-	return <Component {...props} className={className} streaming={streaming} />;
+	return <Component {...props} className={className} />;
 }

apps/dashboard/lib/ai-components/index.ts

@@ -1,6 +1,6 @@
 /** biome-ignore-all lint/performance/noBarrelFile: this is a barrel file */
 
-export { parseComponents, parseContentSegments } from "./parser";
+export { parseContentSegments } from "./parser";
 
 export { componentRegistry, getComponent, hasComponent } from "./registry";
 
@@ -15,7 +15,6 @@ export type {
 	DistributionInput,
 	LinksListInput,
 	MiniMapInput,
-	ParsedContent,
 	ParsedSegments,
 	RawComponentInput,
 	ReferrerItem,

apps/dashboard/lib/ai-components/parser.ts

@@ -2,7 +2,6 @@ import { hasComponent } from "./registry";
 import { validateComponentJSON } from "./schemas";
 import type {
 	ContentSegment,
-	ParsedContent,
 	ParsedSegments,
 	RawComponentInput,
 } from "./types";
@@ -203,24 +202,3 @@ export function parseContentSegments(content: string): ParsedSegments {
 	return { segments };
 }
 
-/**
- * @deprecated Use parseContentSegments for ordered rendering
- * Parse component JSON objects from markdown content.
- * Extracts components in format: {"type":"..."}
- */
-export function parseComponents(content: string): ParsedContent {
-	const { segments } = parseContentSegments(content);
-
-	const text = segments
-		.filter((s): s is ContentSegment & { type: "text" } => s.type === "text")
-		.map((s) => s.content)
-		.join(" ");
-
-	const components = segments
-		.filter(
-			(s): s is ContentSegment & { type: "component" } => s.type === "component"
-		)
-		.map((s) => s.content);
-
-	return { text, components };
-}