@@ -31,6 +31,7 @@ export default function Home() {
3131const [ hasSearched , setHasSearched ] = useState < boolean > ( false )
3232const [ error , setError ] = useState < string | null > ( null )
3333const [ selectedBook , setSelectedBook ] = useState < Book | null > ( null )
34+ const [ isGeneratingGraph , setIsGeneratingGraph ] = useState < boolean > ( false )
3435
3536useEffect ( ( ) => {
3637const requestBooks = async ( ) => {
@@ -79,7 +80,9 @@ export default function Home() {
7980setShowResults ( false )
8081setSearchTerm ( book . title )
8182setError ( null )
83+ setGraphResult ( null )
8284setSelectedBook ( book )
85+ setIsGeneratingGraph ( true )
8386
8487startTransition ( async ( ) => {
8588try {
@@ -89,7 +92,8 @@ export default function Home() {
8992setError (
9093err instanceof Error ?err . message :'Failed to generate graph' ,
9194)
92- setGraphResult ( null )
95+ } finally {
96+ setIsGeneratingGraph ( false )
9397}
9498} )
9599}
@@ -200,6 +204,21 @@ export default function Home() {
200204</ div >
201205</ div >
202206
207+ { isGeneratingGraph && (
208+ < div className = "mx-auto mb-8 max-w-4xl" >
209+ < div className = "flex flex-col items-center justify-center rounded-2xl border border-gray-200 bg-white p-8 text-center shadow-lg" >
210+ < div className = "h-10 w-10 animate-spin rounded-full border-4 border-gray-300 border-t-teal-600 sm:h-12 sm:w-12" />
211+ < p className = "mt-4 text-lg font-medium text-gray-800" >
212+ Generating your story graph
213+ { selectedBook && ` for "${ selectedBook . title } } ...
214+ </ p >
215+ < p className = "mt-2 text-sm text-gray-500" >
216+ This might take a few moments.
217+ </ p >
218+ </ div >
219+ </ div >
220+ ) }
221+
203222{ error && (
204223< div className = "mx-auto mb-8 max-w-4xl" >
205224< div className = "rounded-2xl border-2 border-red-200 bg-red-50 p-6 shadow-lg" >