3m Solution

[SuperSimpleDev]

No description provided.

[ayxo1]

Hey, might be missing something, but haven't noticed a solution for the challenge task "If it is loading, don't allow sending a new message". If it is there, my bad :D But if there is none actually, I figured out this one:

Added a 'disabled' attribute to the input element and set it to the isLoading state:

<input disabled={isLoading} placeholder="Send a message" size="30" onChange={saveInputText} value={inputText} onKeyDown={handleKeyDownEvent} />

Changed the 'setIsLoading' state back to false after the Async Chatbot response is generated:

const response = await Chatbot.getResponseAsync(inputText); setChatMessages([ ...newChatMessages, { message: response, sender: 'bot', id: crypto.randomUUID() } ]); setIsLoading(false)

Thanks a lot for your work and sorry in advance if I just didn't notice the solution :D

[NeeradNandan]

I think he gave the task for us to figure out to get loading symbol. Afaik we can use CSS for animation and use async fn to load after some time as @SuperSimpleDev has shown in the soln.