updated thread component

src/components/thread.tsx

@@ -27,6 +27,13 @@ export function Thread({ data }: { data: any }) {
     [data]
   );
 
+  const computeItemKey = useCallback(
+    (index) => {
+      return data[index].id;
+    },
+    [data]
+  );
+
   return (
     <Virtuoso
       data={data}
@@ -35,6 +42,7 @@ export function Thread({ data }: { data: any }) {
         EmptyPlaceholder: () => <Placeholder />,
         ScrollSeekPlaceholder: () => <Placeholder />,
       }}
+      computeItemKey={computeItemKey}
       scrollSeekConfiguration={{
         enter: (velocity) => Math.abs(velocity) > 800,
         exit: (velocity) => Math.abs(velocity) < 500,

src/pages/feed/[id].tsx

@@ -0,0 +1,47 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import BaseLayout from '@layouts/baseLayout';
+import UserLayout from '@layouts/userLayout';
+
+import { useRouter } from 'next/router';
+import { useNostrEvents } from 'nostr-react';
+import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal } from 'react';
+
+export default function Page() {
+  const router = useRouter();
+  const { id }: any = router.query;
+
+  const { events } = useNostrEvents({
+    filter: {
+      '#e': [id],
+      since: 0,
+      kinds: [1],
+      limit: 20,
+    },
+  });
+
+  return (
+    <>
+      {events.map((event) => (
+        <p key={event.id}>
+          {event.pubkey} posted: {event.content}
+        </p>
+      ))}
+    </>
+  );
+}
+
+Page.getLayout = function getLayout(
+  page:
+    | string
+    | number
+    | boolean
+    | ReactElement<unknown, string | JSXElementConstructor<unknown>>
+    | ReactFragment
+    | ReactPortal
+) {
+  return (
+    <BaseLayout>
+      <UserLayout>{page}</UserLayout>
+    </BaseLayout>
+  );
+};

src/pages/feed/global.tsx

@@ -1,12 +1,20 @@
 import BaseLayout from '@layouts/baseLayout';
 import UserLayout from '@layouts/userLayout';
 
+import { Placeholder } from '@components/note/placeholder';
 import { Thread } from '@components/thread';
 
 import { hoursAgo } from '@utils/getDate';
 
 import { dateToUnix, useNostrEvents } from 'nostr-react';
-import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useRef } from 'react';
+import {
+  JSXElementConstructor,
+  ReactElement,
+  ReactFragment,
+  ReactPortal,
+  Suspense,
+  useRef,
+} from 'react';
 
 export default function Page() {
   const now = useRef(new Date());
@@ -15,12 +23,15 @@ export default function Page() {
     filter: {
       since: dateToUnix(hoursAgo(1, now.current)),
       kinds: [1],
+      limit: 100,
     },
   });
 
   return (
-    <div className="h-full w-full overflow-hidden rounded-lg border border-zinc-700 bg-zinc-900 shadow-input">
-      <Thread data={events} />
+    <div className="h-full w-full">
+      <Suspense fallback={<Placeholder />}>
+        <Thread data={events} />
+      </Suspense>
     </div>
   );
 }