From ff3fabecf7beb21af7e8c055153230c4dc68d793 Mon Sep 17 00:00:00 2001
From: Li Xin <lixin.henry@bytedance.com>
Date: Sat, 19 Apr 2025 11:30:49 +0800
Subject: [PATCH] feat: add skeletons

---
 .../app/_components/research-activities-block.tsx  | 14 ++++++++++++++
 web/src/components/ui/skeleton.tsx                 | 13 +++++++++++++
 2 files changed, 27 insertions(+)
 create mode 100644 web/src/components/ui/skeleton.tsx

diff --git a/web/src/app/_components/research-activities-block.tsx b/web/src/app/_components/research-activities-block.tsx
index ff2cd0a..3c8dbb2 100644
--- a/web/src/app/_components/research-activities-block.tsx
+++ b/web/src/app/_components/research-activities-block.tsx
@@ -13,6 +13,7 @@ import { useMemo } from "react";
 import SyntaxHighlighter from "react-syntax-highlighter";
 import { docco } from "react-syntax-highlighter/dist/esm/styles/hljs";
 
+import { Skeleton } from "~/components/ui/skeleton";
 import type { ToolCallRuntime } from "~/core/messages";
 import { useMessage, useStore } from "~/core/store";
 import { cn } from "~/lib/utils";
@@ -108,6 +109,9 @@ type SearchResult =
       image_description: string;
     };
 function WebSearchToolCall({ toolCall }: { toolCall: ToolCallRuntime }) {
+  const searching = useMemo(() => {
+    return toolCall.result === undefined;
+  }, [toolCall.result]);
   const searchResults = useMemo<SearchResult[]>(() => {
     let results: SearchResult[] | undefined = undefined;
     try {
@@ -151,6 +155,16 @@ function WebSearchToolCall({ toolCall }: { toolCall: ToolCallRuntime }) {
       <div className="px-5">
         {pageResults && (
           <ul className="mt-2 flex flex-wrap gap-4">
+            {searching &&
+              [...Array(6)].map((_, i) => (
+                <li
+                  key={`search-result-${i}`}
+                  className="flex w-40 gap-2 rounded-md text-sm"
+                  style={{ height: i >= 3 ? 160 : 108 }}
+                >
+                  <Skeleton className="h-full w-full rounded-md bg-gradient-to-tl from-slate-50 to-slate-200" />
+                </li>
+              ))}
             {pageResults
               .filter((result) => result.type === "page")
               .map((searchResult, i) => (
diff --git a/web/src/components/ui/skeleton.tsx b/web/src/components/ui/skeleton.tsx
new file mode 100644
index 0000000..1e29d7a
--- /dev/null
+++ b/web/src/components/ui/skeleton.tsx
@@ -0,0 +1,13 @@
+import { cn } from "~/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-accent animate-pulse rounded-md", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }