From d7afff56fd4dcb01567b04fbf18529f5bebce41c Mon Sep 17 00:00:00 2001
From: Lars Grammel <lars.grammel@gmail.com>
Date: Fri, 28 Jun 2024 16:45:03 +0200
Subject: [PATCH] feat (docs): add loading state & stop to useObject example
 (#2145)

---
 .../04-streaming-object-generation.mdx        | 46 +++++++++++++++++++
 1 file changed, 46 insertions(+)

diff --git a/content/examples/02-next-pages/01-basics/04-streaming-object-generation.mdx b/content/examples/02-next-pages/01-basics/04-streaming-object-generation.mdx
index f0e96467919a..61cb08eca53d 100644
--- a/content/examples/02-next-pages/01-basics/04-streaming-object-generation.mdx
+++ b/content/examples/02-next-pages/01-basics/04-streaming-object-generation.mdx
@@ -122,3 +122,49 @@ export async function POST(req: Request) {
   return result.toTextStreamResponse()
 }
 ```
+
+## Loading State and Stopping the Stream
+
+You can use the `loading` state to display a loading indicator while the object is being generated.
+You can also use the `stop` function to stop the object generation process.
+
+```tsx filename='app/page.tsx' highlight="7,16,21,24"
+'use client';
+
+import { experimental_useObject as useObject } from 'ai/react';
+import { notificationSchema } from './api/use-object/schema';
+
+export default function Page() {
+  const { object, submit, isLoading, stop } = useObject({
+    api: '/api/use-object',
+    schema: notificationSchema,
+  });
+
+  return (
+    <div>
+      <button
+        onClick={() => submit('Messages during finals week.')}
+        disabled={isLoading}
+      >
+        Generate notifications
+      </button>
+
+      {isLoading && (
+        <div>
+          <div>Loading...</div>
+          <button type="button" onClick={() => stop()}>
+            Stop
+          </button>
+        </div>
+      )}
+
+      {object?.notifications?.map((notification, index) => (
+        <div key={index}>
+          <p>{notification?.name}</p>
+          <p>{notification?.message}</p>
+        </div>
+      ))}
+    </div>
+  );
+}
+```