wip

src/components/AIChatHistory/AIChatHistory.tsx

@@ -49,7 +49,7 @@ export function AIChatHistory(props: AIChatHistoryProps) {
     setIsChatHistoryLoading(false);
   }, [data, chatHistoryId]);
 
-  const isDataLoading = isLoading || isBillingDetailsLoading;
+  const showGlobalLoader = isLoading || isBillingDetailsLoading;
   const hasError = chatHistoryError || billingDetailsError;
 
   useEffect(() => {
@@ -58,24 +58,19 @@ export function AIChatHistory(props: AIChatHistoryProps) {
     }
 
     setIsLoading(false);
+    setIsChatHistoryLoading(false);
   }, [hasError]);
 
   return (
     <AIChatLayout>
       <div className="relative flex grow">
-        {isDataLoading && !hasError && (
+        {showGlobalLoader && (
           <div className="absolute inset-0 z-20 flex items-center justify-center">
             <Loader2Icon className="h-8 w-8 animate-spin stroke-[2.5]" />
           </div>
         )}
 
-        {!isDataLoading && hasError && (
-          <div className="absolute inset-0 z-20 flex items-center justify-center">
-            <ChatHistoryError error={hasError} className="mt-0" />
-          </div>
-        )}
-
-        {!isDataLoading && !hasError && (
+        {!showGlobalLoader && (
           <>
             {isPaidUser && (
               <ListChatHistory
@@ -120,13 +115,19 @@ export function AIChatHistory(props: AIChatHistoryProps) {
             )}
 
             <div className="relative flex grow">
-              {isChatHistoryLoading && (
+              {isChatHistoryLoading && !hasError && (
                 <div className="absolute inset-0 z-20 flex items-center justify-center">
                   <Loader2Icon className="h-8 w-8 animate-spin stroke-[2.5]" />
                 </div>
               )}
 
-              {!isChatHistoryLoading && (
+              {!isChatHistoryLoading && hasError && (
+                <div className="absolute inset-0 z-20 flex items-center justify-center">
+                  <ChatHistoryError error={hasError} className="mt-0" />
+                </div>
+              )}
+
+              {!isChatHistoryLoading && !hasError && (
                 <AIChat
                   key={keyTrigger}
                   messages={data?.messages}

src/components/AIChatHistory/ListChatHistory.tsx

@@ -30,18 +30,27 @@ export function ListChatHistory(props: ListChatHistoryProps) {
   const { activeChatHistoryId, onChatHistoryClick, onDelete } = props;
 
   const [isOpen, setIsOpen] = useState(true);
+  const [isLoading, setIsLoading] = useState(true);
   const [query, setQuery] = useState('');
+
   const {
     data,
     fetchNextPage,
     hasNextPage,
     isFetchingNextPage,
-    isLoading,
     isError,
     error,
-    refetch,
+    isLoading: isLoadingInfiniteQuery,
   } = useInfiniteQuery(listChatHistoryOptions({ query }), queryClient);
 
+  useEffect(() => {
+    if (!data) {
+      return;
+    }
+
+    setIsLoading(false);
+  }, [data?.pages]);
+
   const groupedChatHistory = useMemo(() => {
     const today = DateTime.now().startOf('day');
     const allHistories = data?.pages?.flatMap((page) => page.data);
@@ -85,7 +94,7 @@ export function ListChatHistory(props: ListChatHistoryProps) {
 
   if (!isOpen) {
     return (
-      <div className="absolute top-1 left-1 z-20">
+      <div className="absolute top-2 left-2 z-20">
         <button
           className="flex size-8 items-center justify-center rounded-lg p-1 hover:bg-gray-200"
           onClick={() => {
@@ -133,7 +142,10 @@ export function ListChatHistory(props: ListChatHistoryProps) {
               <span className="text-sm">New Chat</span>
             </button>
 
-            <SearchInput onSearch={setQuery} isLoading={isLoading} />
+            <SearchInput
+              onSearch={setQuery}
+              isLoading={isLoadingInfiniteQuery}
+            />
           </div>
 
           <div className="scrollbar-track-transparent scrollbar-thin scrollbar-thumb-gray-300 -mx-2 mt-6 grow space-y-4 overflow-y-scroll px-2">

src/queries/chat-history.ts

@@ -87,7 +87,7 @@ export function listChatHistoryOptions(
       return httpGet<ListChatHistoryResponse>('/v1-list-chat-history', {
         ...(query?.query ? { query: query.query } : {}),
         ...(pageParam ? { currPage: pageParam } : {}),
-        perPage: '21',
+        perPage: '2',
       });
     },
     enabled: !!isLoggedIn(),