perf improve

src/shared/widgets/global/articles.tsx

@@ -1,7 +1,7 @@
 import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
 import { useQuery } from '@tanstack/react-query';
-import { useVirtualizer } from '@tanstack/react-virtual';
-import { useCallback, useRef } from 'react';
+import { useCallback } from 'react';
+import { VList } from 'virtua';
 
 import { useNDK } from '@libs/ndk/provider';
 
@@ -25,27 +25,13 @@ export function GlobalArticlesWidget({ params }: { params: Widget }) {
     { refetchOnWindowFocus: false }
   );
 
-  const parentRef = useRef<HTMLDivElement>(null);
-  const virtualizer = useVirtualizer({
-    count: data ? data.length : 0,
-    getScrollElement: () => parentRef.current,
-    estimateSize: () => 650,
-    overscan: 4,
-  });
-  const items = virtualizer.getVirtualItems();
-
   // render event match event kind
   const renderItem = useCallback(
-    (index: string | number) => {
-      const event: NDKEvent = data[index];
-      if (!event) return;
-
+    (event: NDKEvent) => {
       return (
-        <div key={event.id} data-index={index} ref={virtualizer.measureElement}>
-          <NoteWrapper event={event}>
-            <ArticleNote event={event} />
-          </NoteWrapper>
-        </div>
+        <NoteWrapper key={event.id} event={event}>
+          <ArticleNote />
+        </NoteWrapper>
       );
     },
     [data]
@@ -54,40 +40,32 @@ export function GlobalArticlesWidget({ params }: { params: Widget }) {
   return (
     <WidgetWrapper>
       <TitleBar id={params.id} title={params.title} />
-      <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">
               <NoteSkeleton />
             </div>
           </div>
-        ) : items.length === 0 ? (
-          <div className="px-3 py-1.5">
-            <div className="rounded-xl bg-white/10 px-3 py-6 backdrop-blur-xl">
-              <div className="flex flex-col items-center gap-4">
-                <p className="text-center text-sm font-medium text-white">
-                  There have been no new articles in the last 24 hours.
+        ) : data.length === 0 ? (
+          <div className="flex h-full w-full flex-col items-center justify-center px-3">
+            <div className="flex flex-col items-center gap-4">
+              <img src="/ghost.png" alt="empty feeds" className="h-16 w-16" />
+              <div className="text-center">
+                <h3 className="text-xl font-semibold leading-tight">
+                  Your newsfeed is empty
+                </h3>
+                <p className="text-center text-white/50">
+                  Connect more people to explore more content
                 </p>
               </div>
             </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))}
-            </div>
-          </div>
+          <VList className="scrollbar-hide h-full">
+            {data.map((item) => renderItem(item))}
+            <div className="h-16" />
+          </VList>
         )}
       </div>
     </WidgetWrapper>