"use client";
import dynamic from "next/dynamic";
import { Skeleton } from "@/components/ui/misc";

/** Recharts is ~100 KB gz — every plot is loaded on demand so the usage route paints its KPIs first. */
const loading = () => <Skeleton className="h-[200px] w-full" />;
const loadingShort = () => <Skeleton className="h-[168px] w-full" />;

export const CostOverTime = dynamic(() => import("./charts").then((m) => m.CostOverTime), { ssr: false, loading });
export const RequestsOverTime = dynamic(() => import("./charts").then((m) => m.RequestsOverTime), { ssr: false, loading });
export const TokensOverTime = dynamic(() => import("./charts").then((m) => m.TokensOverTime), { ssr: false, loading });
export const ProviderDonut = dynamic(() => import("./charts").then((m) => m.ProviderDonut), { ssr: false, loading: loadingShort });
export const ModelBars = dynamic(() => import("./charts").then((m) => m.ModelBars), { ssr: false, loading: loadingShort });
export const LatencyByModel = dynamic(() => import("./charts").then((m) => m.LatencyByModel), { ssr: false, loading: loadingShort });