migrate to tanstack query v5

src/app/explore/components/groupTitle.tsx

@@ -5,7 +5,7 @@ import { useProfile } from '@utils/hooks/useProfile';
 export const GroupTitle = memo(function GroupTitle({ pubkey }: { pubkey: string }) {
   const { status, user } = useProfile(pubkey);
 
-  if (status === 'loading') {
+  if (status === 'pending') {
     return <div className="h-3 w-24 animate-pulse rounded bg-white/10" />;
   }
 

src/app/explore/components/userLatestPosts.tsx

@@ -16,8 +16,12 @@ import { useNostr } from '@utils/hooks/useNostr';
 
 export function UserLatestPosts({ pubkey }: { pubkey: string }) {
   const { getEventsByPubkey } = useNostr();
-  const { status, data } = useQuery(['user-posts', pubkey], async () => {
-    return await getEventsByPubkey(pubkey);
+  const { status, data } = useQuery({
+    queryKey: ['user-posts', pubkey],
+    queryFn: async () => {
+      return await getEventsByPubkey(pubkey);
+    },
+    refetchOnWindowFocus: false,
   });
 
   const renderItem = useCallback(
@@ -60,7 +64,7 @@ export function UserLatestPosts({ pubkey }: { pubkey: string }) {
         Latest post
       </h3>
       <div>
-        {status === 'loading' ? (
+        {status === 'pending' ? (
           <div className="px-3">
             <div className="inline-flex h-16 w-full items-center justify-center gap-1.5 rounded-lg bg-neutral-300 text-sm font-medium dark:bg-neutral-700">
               <LoaderIcon className="h-4 w-4 animate-spin" />

src/app/explore/components/userWithDrawer.tsx

@@ -84,7 +84,7 @@ export const UserWithDrawer = memo(function UserWithDrawer({
       <Dialog.Portal>
         <Dialog.Content className="fixed right-0 top-0 z-50 flex h-full w-[400px] animate-slideRightAndFade items-center justify-center px-4 pb-4 pt-16 transition-all">
           <div className="h-full w-full overflow-y-auto rounded-lg border border-neutral-300 bg-neutral-200 py-3 dark:border-neutral-700 dark:bg-neutral-800">
-            {status === 'loading' ? (
+            {status === 'pending' ? (
               <div>
                 <p>Loading...</p>
               </div>