working on new virtual scroller

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([]);