test only using "use client"

app/page.tsx

@@ -1,9 +1,7 @@
-import { Suspense, use } from "react";
+import { Suspense } from "react";
 import { CreatePostForm } from "~/client/CreatePostForm";
-import { HydrateClient } from "~/client/HydrateClient";
 import { PostList } from "~/components/PostList";
 import { PostListItem } from "~/components/PostListItem";
-import { rsc } from "../server-rsc/trpc";
 
 function PostListSkeleton() {
   return (
@@ -15,22 +13,6 @@ function PostListSkeleton() {
   );
 }
 
-function PostListRSC() {
-  use(
-    Promise.all([
-      rsc.post.list.fetchInfinite({}),
-      // Display loading for at least 300ms
-      new Promise((resolve) => setTimeout(resolve, 3_00)),
-    ]),
-  );
-
-  return (
-    <HydrateClient state={use(rsc.dehydrate())}>
-      <PostList />
-    </HydrateClient>
-  );
-}
-
 export default async function Page() {
   return (
     <div className='space-y-6 p-4'>
@@ -61,9 +43,9 @@ export default async function Page() {
         <h2>All posts</h2>
 
         <div className='overflow-hidden bg-white shadow rounded-md'>
-          <Suspense fallback={<PostListSkeleton />}>
-            <PostListRSC />
-          </Suspense>
+          {/* <Suspense fallback={<PostListSkeleton />}> */}
+          <PostList />
+          {/* </Suspense> */}
         </div>
       </section>
     </div>

components/PostList.tsx

@@ -30,6 +30,7 @@ export function PostList() {
       },
       refetchOnMount: false,
       staleTime: Infinity,
+      suspense: true,
     },
   );