working on new virtual scroller

package.json

@@ -20,6 +20,7 @@
     "@radix-ui/react-tabs": "^1.0.3",
     "@rehooks/local-storage": "^2.4.4",
     "@supabase/supabase-js": "^2.12.0",
+    "@tanstack/react-virtual": "3.0.0-beta.54",
     "@tauri-apps/api": "^1.2.0",
     "@uiw/react-markdown-preview": "^4.1.10",
     "@uiw/react-md-editor": "^3.20.5",

pnpm-lock.yaml

@@ -10,6 +10,7 @@ specifiers:
   '@rehooks/local-storage': ^2.4.4
   '@supabase/supabase-js': ^2.12.0
   '@tailwindcss/typography': ^0.5.9
+  '@tanstack/react-virtual': 3.0.0-beta.54
   '@tauri-apps/api': ^1.2.0
   '@tauri-apps/cli': ^1.2.3
   '@trivago/prettier-plugin-sort-imports': ^4.1.1
@@ -63,6 +64,7 @@ dependencies:
   '@radix-ui/react-tabs': 1.0.3_biqbaboplfbrettd7655fr4n2y
   '@rehooks/local-storage': 2.4.4_react@18.2.0
   '@supabase/supabase-js': 2.12.0
+  '@tanstack/react-virtual': 3.0.0-beta.54_react@18.2.0
   '@tauri-apps/api': 1.2.0
   '@uiw/react-markdown-preview': 4.1.10_zula6vjvt3wdocc4mwcxqa6nzi
   '@uiw/react-md-editor': 3.20.5_zula6vjvt3wdocc4mwcxqa6nzi
@@ -1298,6 +1300,21 @@ packages:
       tailwindcss: 3.2.7_postcss@8.4.21
     dev: true
 
+  /@tanstack/react-virtual/3.0.0-beta.54_react@18.2.0:
+    resolution:
+      { integrity: sha512-D1mDMf4UPbrtHRZZriCly5bXTBMhylslm4dhcHqTtDJ6brQcgGmk8YD9JdWBGWfGSWPKoh2x1H3e7eh+hgPXtQ== }
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      '@tanstack/virtual-core': 3.0.0-beta.54
+      react: 18.2.0
+    dev: false
+
+  /@tanstack/virtual-core/3.0.0-beta.54:
+    resolution:
+      { integrity: sha512-jtkwqdP2rY2iCCDVAFuaNBH3fiEi29aTn2RhtIoky8DTTiCdc48plpHHreLwmv1PICJ4AJUUESaq3xa8fZH8+g== }
+    dev: false
+
   /@tauri-apps/api/1.2.0:
     resolution:
       { integrity: sha512-lsI54KI6HGf7VImuf/T9pnoejfgkNoXveP14pVV7XarrQ46rOejIVJLFqHI9sRReJMGdh2YuCoI3cc/yCWCsrw== }

src/pages/_app.tsx

@@ -2,6 +2,7 @@ import DatabaseProvider from '@components/contexts/database';
 import RelayProvider from '@components/contexts/relay';
 
 import { useLocalStorage } from '@rehooks/local-storage';
+import { Provider } from 'jotai';
 import type { NextPage } from 'next';
 import type { AppProps } from 'next/app';
 import { ReactElement, ReactNode } from 'react';
@@ -24,8 +25,10 @@ export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
   const [relays] = useLocalStorage('relays');
 
   return (
-    <DatabaseProvider>
-      <RelayProvider relays={relays}>{getLayout(<Component {...pageProps} />)}</RelayProvider>
-    </DatabaseProvider>
+    <Provider>
+      <DatabaseProvider>
+        <RelayProvider relays={relays}>{getLayout(<Component {...pageProps} />)}</RelayProvider>
+      </DatabaseProvider>
+    </Provider>
   );
 }

src/pages/newsfeed/circle.tsx

@@ -1,10 +1,43 @@
 import BaseLayout from '@layouts/base';
 import WithSidebarLayout from '@layouts/withSidebar';
 
-import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal } from 'react';
+import { Note } from '@components/note';
+
+import { notesAtom } from '@stores/note';
+
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { useAtom } from 'jotai';
+import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useRef } from 'react';
 
 export default function Page() {
-  return <></>;
+  const [data]: any = useAtom(notesAtom);
+
+  const parentRef = useRef(null);
+
+  const virtualizer = useVirtualizer({
+    count: data.length,
+    overscan: 5,
+    estimateSize: () => 600,
+    getScrollElement: () => parentRef.current,
+    getItemKey: (index) => data[index].id,
+  });
+  const items = virtualizer.getVirtualItems();
+
+  return (
+    <div ref={parentRef} className="scrollbar-hide h-full w-full overflow-y-auto" style={{ contain: 'strict' }}>
+      {items.length > 0 && (
+        <div className="relative w-full" style={{ height: virtualizer.getTotalSize() }}>
+          <div className="absolute top-0 left-0 w-full" style={{ transform: `translateY(${items[0].start}px)` }}>
+            {items.map((virtualRow) => (
+              <div key={virtualRow.key} data-index={virtualRow.index} ref={virtualizer.measureElement}>
+                <Note event={data[virtualRow.index]} />
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
 }
 
 Page.getLayout = function getLayout(

src/stores/note.tsx

@@ -2,3 +2,5 @@ import { atom } from 'jotai';
 
 // usecase: notify user that connector has receive newer note
 export const hasNewerNoteAtom = atom(false);
+// usecase: query notes from database
+export const notesAtom = atom([]);