major overhaul (not finished)

src/pages/newsfeed/circle.tsx

@@ -1,12 +1,45 @@
 import BaseLayout from '@layouts/base';
 import WithSidebarLayout from '@layouts/withSidebar';
 
-import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal } from 'react';
+import { Note } from '@components/note';
+
+import { initialNotesAtom } from '@stores/note';
+
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { useAtom } from 'jotai';
+import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useMemo, useRef } from 'react';
 
 export default function Page() {
+  const [data]: any = useAtom(initialNotesAtom);
+
+  const parentRef = useRef(null);
+  const count = useMemo(() => data.length, [data]);
+
+  const virtualizer = useVirtualizer({
+    count,
+    getScrollElement: () => parentRef.current,
+    getItemKey: (index: number) => data[index].id,
+    estimateSize: () => 500,
+    overscan: 5,
+  });
+
+  const items = virtualizer.getVirtualItems();
+
   return (
     <div className="h-full w-full">
-      <p>Circle Newsfeed</p>
+      {items.length > 0 && (
+        <div ref={parentRef} className="scrollbar-hide h-full w-full overflow-y-auto" style={{ contain: 'strict' }}>
+          <div className={`relative w-full h-${virtualizer.getTotalSize()}px`}>
+            <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>
+      )}
     </div>
   );
 }