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>
   );
 }

src/pages/newsfeed/following.tsx

@@ -6,13 +6,13 @@ import { Note } from '@components/note';
 import FormBasic from '@components/note/form/basic';
 import { Placeholder } from '@components/note/placeholder';
 
-import { atomHasNewerNote } from '@stores/note';
+import { hasNewerNoteAtom } from '@stores/note';
 
 import { dateToUnix } from '@utils/getDate';
 
 import { useAtom } from 'jotai';
 import { Key, useCallback, useState } from 'react';
-import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useContext, useMemo, useRef } from 'react';
+import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useContext, useEffect, useRef } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 
 export default function Page() {
@@ -20,7 +20,7 @@ export default function Page() {
 
   const [data, setData] = useState([]);
   const [reload, setReload] = useState(false);
-  const [hasNewerNote, setHasNewerNote] = useAtom(atomHasNewerNote);
+  const [hasNewerNote, setHasNewerNote] = useAtom(hasNewerNoteAtom);
 
   const now = useRef(new Date());
   const limit = useRef(30);
@@ -70,7 +70,7 @@ export default function Page() {
     [data]
   );
 
-  useMemo(() => {
+  useEffect(() => {
     const getData = async () => {
       const result = await db.select(`SELECT * FROM cache_notes ORDER BY created_at DESC LIMIT ${limit.current}`);
       if (result.length > 0) {