Fix interactions tabs

components/account/tabs/interactions/InteractionsTabContent.tsx

@@ -39,8 +39,11 @@ const InteractionsTabContent: React.FC<InteractionsTabContentProps> = ({
     accountName: accountNameFromRoute,
   } as any;
 
-  const { commentSearchData, isCommentSearchDataLoading } =
-    useCommentSearch(props);
+  const {
+    commentSearchData,
+    isCommentSearchDataLoading,
+    isCommentSearchDataFetching,
+  } = useCommentSearch(props);
 
   const buildCommentSearchView = () => {
     if (!isCommentSearchDataLoading && !commentSearchData?.total_operations) {
@@ -49,7 +52,7 @@ const InteractionsTabContent: React.FC<InteractionsTabContentProps> = ({
           <NoResult />
         </div>
       );
-    } else if (isCommentSearchDataLoading) {
+    } else if (isCommentSearchDataFetching && isCommentSearchDataLoading) {
       return (
         <div className="flex justify-center text-center items-center">
           <Loader2 className="animate-spin mt-1 text-text h-12 w-12 ml-3 ..." />
@@ -89,7 +92,7 @@ const InteractionsTabContent: React.FC<InteractionsTabContentProps> = ({
         </CardHeader>
         <CardContent>
           <AccountPageInteractionSearch
-            isCommentSearchDataLoading={isCommentSearchDataLoading}
+            isCommentSearchDataLoading={isCommentSearchDataFetching}
           />
         </CardContent>
       </Card>

components/home/searches/CommentsSearch.tsx

@@ -35,7 +35,7 @@ const CommentsSearch = () => {
   const pathname = usePathname();
   const router = useRouter();
 
-  const { isCommentSearchDataLoading } = useCommentSearch(commentSearchProps);
+  const { isCommentSearchDataFetching } = useCommentSearch(commentSearchProps);
   const { handleCommentsSearch } = useHandleCommentsSearch();
 
   const { operationsTypes } = useOperationsTypes();
@@ -164,7 +164,7 @@ const CommentsSearch = () => {
             disabled={!accountName || !permlink}
           >
             Search
-            {isCommentSearchDataLoading && (
+            {isCommentSearchDataFetching && (
               <Loader2 className="ml-2 animate-spin h-4 w-4  ..." />
             )}
           </Button>

hooks/api/common/useCommentSearch.ts

@@ -8,7 +8,8 @@ const useCommentSearch = (
 ) => {
   const {
     data: commentSearchData,
-    isFetching: isCommentSearchDataLoading,
+    isFetching: isCommentSearchDataFetching,
+    isLoading: isCommentSearchDataLoading,
     isError: commentSearchDataError,
   } = useQuery({
     queryKey: ["commentSearch", commentSearchProps],
@@ -28,6 +29,7 @@ const useCommentSearch = (
   return {
     commentSearchData,
     isCommentSearchDataLoading,
+    isCommentSearchDataFetching,
     commentSearchDataError,
   };
 };