improve error handling for useevent hook

src/shared/notes/child.tsx

@@ -4,12 +4,22 @@ import { User } from '@shared/user';
 import { useEvent } from '@utils/hooks/useEvent';
 
 export function ChildNote({ id, isRoot }: { id: string; isRoot?: boolean }) {
-  const { status, data } = useEvent(id);
+  const { isFetching, isError, data } = useEvent(id);
 
-  if (status === 'pending' || !data) {
+  if (isFetching) {
     return <NoteSkeleton />;
   }
 
+  if (isError) {
+    return (
+      <div className="relative flex gap-3">
+        <div className="relative flex-1 rounded-md bg-neutral-200 px-2 py-2 dark:bg-neutral-800">
+          Failed to fetch event
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="relative flex gap-3">
       <div className="relative flex-1 rounded-md bg-neutral-200 px-2 py-2 dark:bg-neutral-800">

src/shared/notes/mentions/note.tsx

@@ -20,7 +20,7 @@ export const MentionNote = memo(function MentionNote({
   id: string;
   editing?: boolean;
 }) {
-  const { status, data } = useEvent(id);
+  const { isFetching, isError, data } = useEvent(id);
   const { addWidget } = useWidget();
 
   const renderKind = (event: NDKEvent) => {
@@ -36,7 +36,7 @@ export const MentionNote = memo(function MentionNote({
     }
   };
 
-  if (status === 'pending') {
+  if (isFetching) {
     return (
       <div className="w-full cursor-default rounded-lg bg-neutral-100 p-3 dark:bg-neutral-900">
         <NoteSkeleton />
@@ -44,6 +44,14 @@ export const MentionNote = memo(function MentionNote({
     );
   }
 
+  if (isError) {
+    return (
+      <div className="w-full cursor-default rounded-lg bg-neutral-100 p-3 dark:bg-neutral-900">
+        Failed to fetch event
+      </div>
+    );
+  }
+
   return (
     <div className="my-2 flex w-full cursor-default flex-col gap-1 rounded-lg bg-neutral-100 dark:bg-neutral-900">
       <div className="mt-3 px-3">