perf improve

src/shared/widgets/local/files.tsx

@@ -1,7 +1,7 @@
 import { NDKEvent } 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';
 
@@ -27,27 +27,15 @@ export function LocalFilesWidget({ 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 event: NDKEvent = data[index];
-      if (!event) return;
-
+    (dbEvent: DBEvent) => {
+      const event: NDKEvent = JSON.parse(dbEvent.event as string);
       return (
-        <div key={event.id} data-index={index} ref={virtualizer.measureElement}>
-          <NoteWrapper event={event}>
-            <FileNote event={event} />
-          </NoteWrapper>
-        </div>
+        <NoteWrapper key={event.id} event={event}>
+          <FileNote />
+        </NoteWrapper>
       );
     },
     [data]
@@ -56,75 +44,59 @@ export function LocalFilesWidget({ 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="bbg-white/10 rounded-xl px-3 py-6 backdrop-blur-xl">
-              <div className="flex flex-col items-center gap-4">
-                <p className="text-center text-sm text-white">
-                  There have been no new posts.
+        ) : dbEvents.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))}
+          <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="px-3 py-1.5">
-            <div className="rounded-xl bg-white/10 px-3 py-3 backdrop-blur-xl">
-              <NoteSkeleton />
-            </div>
-          </div>
-        )}
-        <div className="px-3 py-1.5">
-          <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>
-        </div>
       </div>
     </WidgetWrapper>
   );