perf improve

src/shared/widgets/local/follows.tsx

@@ -1,7 +1,7 @@
 import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
 import { useInfiniteQuery } from '@tanstack/react-query';
-import { useVirtualizer } from '@tanstack/react-virtual';
-import { useCallback, useMemo, useRef } from 'react';
+import { useCallback, useMemo } from 'react';
+import { VList } from 'virtua';
 
 import { useStorage } from '@libs/storage/provider';
 
@@ -35,80 +35,42 @@ export function LocalFollowsWidget({ params }: { params: Widget }) {
     () => (data ? data.pages.flatMap((d: { data: DBEvent[] }) => d.data) : []),
     [data]
   );
-  const parentRef = useRef<HTMLDivElement>();
-  const virtualizer = useVirtualizer({
-    count: hasNextPage ? dbEvents.length : dbEvents.length,
-    getScrollElement: () => parentRef.current,
-    estimateSize: () => 650,
-    overscan: 4,
-  });
-  const items = virtualizer.getVirtualItems();
 
   // render event match event kind
   const renderItem = useCallback(
-    (index: string | number) => {
-      const dbEvent: DBEvent = dbEvents[index];
-      if (!dbEvent) return;
-
+    (dbEvent: DBEvent) => {
       const event: NDKEvent = JSON.parse(dbEvent.event as string);
       switch (event.kind) {
         case NDKKind.Text:
           return (
-            <div
-              key={dbEvent.id + index}
-              data-index={index}
-              ref={virtualizer.measureElement}
+            <NoteWrapper
+              key={dbEvent.id + dbEvent.root_id + dbEvent.reply_id}
+              event={event}
+              root={dbEvent.root_id}
+              reply={dbEvent.reply_id}
             >
-              <NoteWrapper event={event} root={dbEvent.root_id} reply={dbEvent.reply_id}>
-                <TextNote content={event.content} />
-              </NoteWrapper>
-            </div>
+              <TextNote />
+            </NoteWrapper>
           );
         case NDKKind.Repost:
-          return (
-            <div
-              key={dbEvent.id + index}
-              data-index={index}
-              ref={virtualizer.measureElement}
-            >
-              <Repost key={dbEvent.id} event={event} />
-            </div>
-          );
+          return <Repost key={dbEvent.id} event={event} />;
         case 1063:
           return (
-            <div
-              key={dbEvent.id + index}
-              data-index={index}
-              ref={virtualizer.measureElement}
-            >
-              <NoteWrapper event={event}>
-                <FileNote event={event} />
-              </NoteWrapper>
-            </div>
+            <NoteWrapper key={dbEvent.id} event={event}>
+              <FileNote />
+            </NoteWrapper>
           );
         case NDKKind.Article:
           return (
-            <div
-              key={dbEvent.id + index}
-              data-index={index}
-              ref={virtualizer.measureElement}
-            >
-              <NoteWrapper event={event}>
-                <ArticleNote event={event} />
-              </NoteWrapper>
-            </div>
+            <NoteWrapper key={dbEvent.id} event={event}>
+              <ArticleNote />
+            </NoteWrapper>
           );
         default:
           return (
-            <div
-              key={dbEvent.id + index}
-              data-index={index}
-              ref={virtualizer.measureElement}
-            >
-              <NoteWrapper event={event}>
-                <UnknownNote event={event} />
-              </NoteWrapper>
-            </div>
+            <NoteWrapper key={dbEvent.id} event={event}>
+              <UnknownNote />
+            </NoteWrapper>
           );
       }
     },
@@ -118,7 +80,7 @@ export function LocalFollowsWidget({ params }: { params: Widget }) {
   return (
     <WidgetWrapper>
       <TitleBar id={params.id} title="Follows" />
-      <div ref={parentRef} className="scrollbar-hide h-full overflow-y-auto pb-20">
+      <div className="h-full">
         {status === 'loading' ? (
           <div className="px-3 py-1.5">
             <div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
@@ -140,59 +102,37 @@ export function LocalFollowsWidget({ params }: { params: Widget }) {
             </div>
           </div>
         ) : (
-          <div
-            style={{
-              position: 'relative',
-              width: '100%',
-              height: `${virtualizer.getTotalSize()}px`,
-            }}
-          >
-            <div
-              className="absolute left-0 top-0 w-full"
-              style={{
-                transform: `translateY(${items[0].start}px)`,
-              }}
-            >
-              {items.map((item) => renderItem(item.index))}
+          <VList className="scrollbar-hide h-full">
+            {dbEvents.map((item) => renderItem(item))}
+            <div className="flex items-center justify-center px-3 py-1.5">
+              {dbEvents.length > 0 ? (
+                <button
+                  onClick={() => fetchNextPage()}
+                  disabled={!hasNextPage || isFetchingNextPage}
+                  className="inline-flex h-10 w-max items-center justify-center gap-2 rounded-full bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none"
+                >
+                  {isFetchingNextPage ? (
+                    <>
+                      <span>Loading...</span>
+                      <LoaderIcon className="h-5 w-5 animate-spin text-white" />
+                    </>
+                  ) : hasNextPage ? (
+                    <>
+                      <ArrowRightCircleIcon className="h-5 w-5 text-white" />
+                      <span>Load more</span>
+                    </>
+                  ) : (
+                    <>
+                      <ArrowRightCircleIcon className="h-5 w-5 text-white" />
+                      <span>Nothing more to load</span>
+                    </>
+                  )}
+                </button>
+              ) : null}
             </div>
-          </div>
+            <div className="h-16" />
+          </VList>
         )}
-        {isFetchingNextPage && (
-          <div className="mb-20 px-3">
-            <div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
-              <NoteSkeleton />
-            </div>
-          </div>
-        )}
-        <div className="px-3 py-1.5">
-          {dbEvents.length > 0 ? (
-            <button
-              onClick={() => fetchNextPage()}
-              disabled={!hasNextPage || isFetchingNextPage}
-              className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none"
-            >
-              {isFetchingNextPage ? (
-                <>
-                  <span className="w-5" />
-                  <span>Loading...</span>
-                  <LoaderIcon className="h-5 w-5 animate-spin text-white" />
-                </>
-              ) : hasNextPage ? (
-                <>
-                  <span className="w-5" />
-                  <span>Load more</span>
-                  <ArrowRightCircleIcon className="h-5 w-5" />
-                </>
-              ) : (
-                <>
-                  <span className="w-5" />
-                  <span>Nothing more to load</span>
-                  <ArrowRightCircleIcon className="h-5 w-5" />
-                </>
-              )}
-            </button>
-          ) : null}
-        </div>
       </div>
     </WidgetWrapper>
   );