diff --git a/src/components/AIChatHistory/ListChatHistory.tsx b/src/components/AIChatHistory/ListChatHistory.tsx
index b8d7b482f..599a1a0a3 100644
--- a/src/components/AIChatHistory/ListChatHistory.tsx
+++ b/src/components/AIChatHistory/ListChatHistory.tsx
@@ -9,6 +9,7 @@ import { Loader2Icon, PlusIcon, SearchIcon } from 'lucide-react';
 import { DateTime } from 'luxon';
 import { useEffect, useMemo, useState } from 'react';
 import { useDebounceValue } from '../../hooks/use-debounce';
+import { ListChatHistorySkeleton } from './ListChatHistorySkeleton';
 
 type ListChatHistoryProps = {
   activeChatHistoryId?: string;
@@ -64,6 +65,10 @@ export function ListChatHistory(props: ListChatHistoryProps) {
     );
   }, [data?.pages]);
 
+  if (isLoading) {
+    return <ListChatHistorySkeleton />;
+  }
+
   return (
     <div className="w-[255px] shrink-0 border-r border-gray-200 bg-white p-2">
       <button
diff --git a/src/components/AIChatHistory/ListChatHistorySkeleton.tsx b/src/components/AIChatHistory/ListChatHistorySkeleton.tsx
new file mode 100644
index 000000000..070810d5b
--- /dev/null
+++ b/src/components/AIChatHistory/ListChatHistorySkeleton.tsx
@@ -0,0 +1,30 @@
+export function ListChatHistorySkeleton() {
+  return (
+    <div className="w-[255px] shrink-0 border-r border-gray-200 bg-white p-2">
+      <div className="h-9 w-full animate-pulse rounded-lg bg-gray-200" />
+
+      <div className="relative mt-2">
+        <div className="h-9 w-full animate-pulse rounded-lg bg-gray-200" />
+        <div className="absolute top-1/2 left-2.5 -translate-y-1/2">
+          <div className="h-4 w-4 animate-pulse rounded-full bg-gray-300" />
+        </div>
+      </div>
+
+      <div className="mt-6 space-y-4">
+        {['Today', 'Last 7 Days', 'Older'].map((group) => (
+          <div key={group}>
+            <div className="ml-2 h-4 w-16 animate-pulse rounded bg-gray-200" />
+            <ul className="mt-1 space-y-0.5 px-2">
+              {[1, 2, 3].map((i) => (
+                <li
+                  key={i}
+                  className="h-9 animate-pulse rounded-lg bg-gray-100"
+                ></li>
+              ))}
+            </ul>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}