@@ -259,15 +259,15 @@ While executing a Server Function, you can show a loading indicator with React's
259259``` tsx filename="app/ui/button.tsx" switcher
260260' use client'
261261
262- import { useActionState } from ' react'
262+ import { useActionState , startTransition } from ' react'
263263import { createPost } from ' @/app/actions'
264264import { LoadingSpinner } from ' @/app/ui/loading-spinner'
265265
266266export function Button() {
267267 const [state, action, pending] = useActionState (createPost , false )
268268
269269 return (
270- <button onClick = { async () => action ( )} >
270+ <button onClick = { () => startTransition ( action )} >
271271 { pending ? <LoadingSpinner /> : ' Create Post' }
272272 </button >
273273 )
@@ -277,15 +277,15 @@ export function Button() {
277277``` jsx filename="app/ui/button.js" switcher
278278' use client'
279279
280- import { useActionState } from ' react'
280+ import { useActionState , startTransition } from ' react'
281281import { createPost } from ' @/app/actions'
282282import { LoadingSpinner } from ' @/app/ui/loading-spinner'
283283
284284export function Button () {
285285 const [state , action , pending ] = useActionState (createPost, false )
286286
287287 return (
288- < button onClick= {async () => action ( )}>
288+ < button onClick= {() => startTransition (action )}>
289289 {pending ? < LoadingSpinner / > : ' Create Post' }
290290 < / button>
291291 )
0 commit comments