add test suspense code

src/app/_components/test-suspense.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { api } from "@/trpc/react";
+import { Suspense } from "react";
+
+export default function TestSuspense() {
+  return (
+    <div>
+      <h1>Test Suspense</h1>
+      <Suspense fallback={<div>Loading...</div>}>
+        <SayHi />
+      </Suspense>
+    </div>
+  );
+}
+
+function SayHi() {
+  const [greet, getGreet] = api.post.hello.useSuspenseQuery({
+    text: "Suspense user",
+  });
+
+  return <div>{greet.greeting}</div>;
+}

src/app/page.tsx

@@ -4,6 +4,7 @@ import Link from "next/link";
 import { CreatePost } from "@/app/_components/create-post";
 import { getServerAuthSession } from "@/server/auth";
 import { api } from "@/trpc/server";
+import TestSuspense from "./_components/test-suspense";
 
 export default async function Home() {
   noStore();
@@ -59,6 +60,7 @@ export default async function Home() {
         </div>
 
         <CrudShowcase />
+        <TestSuspense />
       </div>
     </main>
   );

src/server/api/routers/post.ts

@@ -7,9 +7,12 @@ import {
 } from "@/server/api/trpc";
 
 export const postRouter = createTRPCRouter({
-  hello: publicProcedure
+  hello: protectedProcedure
     .input(z.object({ text: z.string() }))
-    .query(({ input }) => {
+    .query(async ({ input }) => {
+      // wait for 1 second
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+
       return {
         greeting: `Hello ${input.text}`,
       };