Improve image and video generation loading states

src/styles/globals.css

@@ -173,6 +173,49 @@
   }
 }
 
+.generation-loading-sweep {
+  animation: generation-loading-sweep 1.8s ease-in-out infinite;
+}
+
+.generation-loading-float {
+  animation: generation-loading-float 2.4s ease-in-out infinite;
+}
+
+.generation-loading-pan {
+  animation: generation-loading-pan 1.6s ease-in-out infinite;
+}
+
+@keyframes generation-loading-sweep {
+  0% {
+    transform: translateX(-60%);
+  }
+  100% {
+    transform: translateX(360%);
+  }
+}
+
+@keyframes generation-loading-float {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-2px);
+  }
+}
+
+@keyframes generation-loading-pan {
+  0%,
+  100% {
+    transform: translateX(-20%);
+    opacity: 0.55;
+  }
+  50% {
+    transform: translateX(70%);
+    opacity: 1;
+  }
+}
+
 body {
   font-family: var(--font-sans);
 }

src/toolkits/toolkits/components/generation-loading.tsx

@@ -0,0 +1,132 @@
+import { ImageIcon, Sparkles, VideoIcon } from "lucide-react";
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+type GenerationKind = "image" | "video";
+
+type GenerationLoadingProps = {
+  kind: GenerationKind;
+  prompt?: string;
+  isPartial?: boolean;
+};
+
+const previewTiles = Array.from({ length: 9 }, (_, index) => index);
+const videoFrames = Array.from({ length: 5 }, (_, index) => index);
+const progressSegments = Array.from({ length: 3 }, (_, index) => index);
+
+export const GenerationLoading = ({
+  kind,
+  prompt,
+  isPartial,
+}: GenerationLoadingProps) => {
+  const isVideo = kind === "video";
+  const Icon = isVideo ? VideoIcon : ImageIcon;
+  const trimmedPrompt = prompt?.trim();
+  const promptText =
+    trimmedPrompt === undefined || trimmedPrompt.length === 0
+      ? "Waiting for generation details"
+      : trimmedPrompt;
+
+  return (
+    <div className="border-border/70 bg-muted/30 relative w-full overflow-hidden rounded-lg border p-3">
+      <div className="from-primary/10 pointer-events-none absolute inset-0 bg-gradient-to-br via-transparent to-emerald-500/10" />
+      <div className="relative flex flex-col gap-3 sm:flex-row sm:items-center">
+        <div
+          className={cn(
+            "border-border/70 bg-background relative shrink-0 overflow-hidden rounded-md border shadow-sm",
+            isVideo ? "aspect-video w-full sm:w-40" : "aspect-square w-28",
+          )}
+        >
+          {isVideo ? <VideoLoadingPreview /> : <ImageLoadingPreview />}
+          <div className="generation-loading-sweep absolute inset-y-0 -left-1/2 w-1/2 bg-gradient-to-r from-transparent via-white/40 to-transparent dark:via-white/10" />
+          <div className="bg-background/70 absolute top-2 left-2 rounded-full p-1 backdrop-blur">
+            <Icon className="size-3.5" />
+          </div>
+        </div>
+
+        <div className="min-w-0 flex-1 space-y-3">
+          <div className="flex items-start gap-2">
+            <Sparkles className="generation-loading-float text-primary mt-0.5 size-4" />
+            <div className="min-w-0">
+              <p className="text-sm font-medium">
+                {isPartial
+                  ? "Preparing prompt"
+                  : isVideo
+                    ? "Rendering video"
+                    : "Composing image"}
+              </p>
+              <p className="text-muted-foreground line-clamp-2 text-sm">
+                {promptText}
+              </p>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-3 gap-1.5" aria-hidden="true">
+            {progressSegments.map((segment) => (
+              <div
+                key={segment}
+                className="bg-muted h-1.5 overflow-hidden rounded-full"
+              >
+                <div
+                  className={cn(
+                    "generation-loading-pan h-full w-2/3 rounded-full",
+                    isVideo ? "bg-sky-400/80" : "bg-rose-400/80",
+                  )}
+                  style={{ animationDelay: `${segment * 180}ms` }}
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const ImageLoadingPreview = () => {
+  return (
+    <div className="grid h-full grid-cols-3 gap-1 p-2">
+      {previewTiles.map((tile) => (
+        <div
+          key={tile}
+          className={cn(
+            "animate-pulse rounded-sm bg-gradient-to-br",
+            tile % 3 === 0 && "from-rose-400/35 to-amber-300/25",
+            tile % 3 === 1 && "to-primary/25 from-emerald-300/30",
+            tile % 3 === 2 && "from-amber-300/30 to-rose-300/25",
+          )}
+          style={{ animationDelay: `${tile * 90}ms` }}
+        />
+      ))}
+    </div>
+  );
+};
+
+const VideoLoadingPreview = () => {
+  return (
+    <div className="relative h-full overflow-hidden bg-gradient-to-br from-sky-400/20 via-emerald-300/15 to-amber-300/20">
+      <div className="absolute inset-x-2 top-2 flex gap-1.5">
+        {videoFrames.map((frame) => (
+          <div
+            key={frame}
+            className="bg-background/60 h-10 flex-1 animate-pulse rounded-sm"
+            style={{ animationDelay: `${frame * 120}ms` }}
+          />
+        ))}
+      </div>
+      <div className="absolute inset-x-2 bottom-2 flex items-end gap-1">
+        {videoFrames.concat(videoFrames).map((frame, index) => (
+          <div
+            key={`${frame}-${index}`}
+            className="bg-foreground/30 flex-1 animate-pulse rounded-full"
+            style={{
+              height: `${6 + (index % 5) * 3}px`,
+              animationDelay: `${index * 80}ms`,
+            }}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};

src/toolkits/toolkits/image/tools/generate/client.tsx

@@ -2,6 +2,8 @@ import React from "react";
 
 import Image from "next/image";
 
+import { GenerationLoading } from "../../../components/generation-loading";
+
 import type { baseGenerateTool } from "./base";
 
 import type { ClientToolConfig } from "@/toolkits/types";
@@ -10,8 +12,14 @@ export const generateToolConfigClient: ClientToolConfig<
   typeof baseGenerateTool.inputSchema.shape,
   typeof baseGenerateTool.outputSchema.shape
 > = {
-  CallComponent: ({ args }) => {
-    return <span className="opacity/60 text-sm font-light">{args.prompt}</span>;
+  CallComponent: ({ args, isPartial }) => {
+    return (
+      <GenerationLoading
+        kind="image"
+        prompt={args.prompt}
+        isPartial={isPartial}
+      />
+    );
   },
   ResultComponent: ({ result }) => {
     return (

src/toolkits/toolkits/video/tools/generate/client.tsx

@@ -1,5 +1,7 @@
 import React from "react";
 
+import { GenerationLoading } from "../../../components/generation-loading";
+
 import type { baseGenerateTool } from "./base";
 
 import type { ClientToolConfig } from "@/toolkits/types";
@@ -8,8 +10,14 @@ export const generateToolConfigClient: ClientToolConfig<
   typeof baseGenerateTool.inputSchema.shape,
   typeof baseGenerateTool.outputSchema.shape
 > = {
-  CallComponent: ({ args }) => {
-    return <span className="opacity/60 text-sm font-light">{args.prompt}</span>;
+  CallComponent: ({ args, isPartial }) => {
+    return (
+      <GenerationLoading
+        kind="video"
+        prompt={args.prompt}
+        isPartial={isPartial}
+      />
+    );
   },
   ResultComponent: ({ result }) => {
     return <video src={result.url} autoPlay loop muted playsInline />;