clean up

src/pages/_app.tsx

@@ -2,7 +2,10 @@ import RelayProvider from '@components/relaysProvider';
 
 import { relaysAtom } from '@stores/relays';
 
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Provider, useAtomValue } from 'jotai';
+import { queryClientAtom } from 'jotai-tanstack-query';
+import { useHydrateAtoms } from 'jotai/react/utils';
 import type { NextPage } from 'next';
 import type { AppProps } from 'next/app';
 import { ReactElement, ReactNode } from 'react';
@@ -18,14 +21,25 @@ type AppPropsWithLayout = AppProps & {
   Component: NextPageWithLayout;
 };
 
+const queryClient = new QueryClient();
+
+const HydrateAtoms = ({ children }) => {
+  useHydrateAtoms([[queryClientAtom, queryClient]]);
+  return children;
+};
+
 export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
   // Use the layout defined at the page level, if available
   const getLayout = Component.getLayout ?? ((page) => page);
   const relays = useAtomValue(relaysAtom);
 
   return (
-    <Provider>
-      <RelayProvider relays={relays}>{getLayout(<Component {...pageProps} />)}</RelayProvider>
-    </Provider>
+    <QueryClientProvider client={queryClient}>
+      <Provider>
+        <HydrateAtoms>
+          <RelayProvider relays={relays}>{getLayout(<Component {...pageProps} />)}</RelayProvider>
+        </HydrateAtoms>
+      </Provider>
+    </QueryClientProvider>
   );
 }

src/pages/newsfeed/following.tsx

@@ -3,17 +3,16 @@ import WithSidebarLayout from '@layouts/withSidebar';
 
 import { NoteBase } from '@components/note/base';
 import FormBasic from '@components/note/form/basic';
+import { Placeholder } from '@components/note/placeholder';
 
-import { hasNewerNoteAtom, notesAtom } from '@stores/note';
+import { notesAtom } from '@stores/note';
 
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { useAtom } from 'jotai';
-import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useRef } from 'react';
+import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, Suspense, useRef } from 'react';
 
 export default function Page() {
   const [data]: any = useAtom(notesAtom);
-  const [hasNewerNote, setHasNewerNote] = useAtom(hasNewerNoteAtom);
-
   const parentRef = useRef(null);
 
   const virtualizer = useVirtualizer({
@@ -25,40 +24,26 @@ export default function Page() {
   });
   const items = virtualizer.getVirtualItems();
 
-  const loadNewest = () => {
-    console.log('load');
-  };
-
   return (
     <div ref={parentRef} className="scrollbar-hide h-full w-full overflow-y-auto" style={{ contain: 'strict' }}>
-      <div>
-        {hasNewerNote && (
-          <div className="absolute top-8 left-1/2 z-50 -translate-x-1/2 transform">
-            <button
-              onClick={() => loadNewest()}
-              className="inline-flex h-8 transform items-center justify-center gap-1 rounded-full bg-fuchsia-500 px-3 text-sm shadow-lg shadow-fuchsia-900/50 active:translate-y-1"
-            >
-              <span className="text-white drop-shadow">Load newest</span>
-            </button>
-          </div>
-        )}
-      </div>
-      <div>
+      <div className="relative">
         <FormBasic />
       </div>
-      <div>
-        {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}>
-                  <NoteBase event={data[virtualRow.index]} />
-                </div>
-              ))}
+      <Suspense fallback={<Placeholder />}>
+        <div>
+          {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}>
+                    <NoteBase event={data[virtualRow.index]} />
+                  </div>
+                ))}
+              </div>
             </div>
-          </div>
-        )}
-      </div>
+          )}
+        </div>
+      </Suspense>
     </div>
   );
 }