Added a loading spinner in NLU prediction

[TheCoderAdi]

Motivation

This PR introduces a loading state to the Selectable component to improve the user experience while fetching NLP predictions. The CircularProgress spinner is displayed during API requests to indicate loading status.

Fixes issue: #638

Changes Made

• Added a loading state in Selectable.tsx using useQuery with react-query.
• Passed isLoading prop to the Selectable component for better state management.
• Displayed a CircularProgress spinner inside Selectable when loading is true.
• Ensured proper styling of the spinner to align correctly with the input field.

Type of Change

• New feature (non-breaking change which adds functionality)

Checklist

• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation (if applicable)
• I have added unit tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes

[marrouchi]

Suggested change

	placeholder={placeholder}
	placeholder={placeholder}
	InputProps={{
	endAdornment: loading ? (
	<InputAdornment position="end">
	<CircularProgress size={20} />
	</InputAdornment>
	) : null,
	}}

I think you can add it as a adornment to the input.

[TheCoderAdi]

Okay I will do that

[TheCoderAdi]

In the TextField component, we can use InputProps to pass the endAdornment, but in the Input component, we need to use endAdornment directly. While using InputAdornment with TextField works as expected, it did not behave as intended when applied to Input.

To resolve this, I implemented custom CSS to properly position the spinner within the input field. After thorough testing across different devices, the solution is responsive and working as expected.

[TheCoderAdi]

Hello @marrouchi ,
Any further changes needed ?

[IkbelTalebHssan]

Thank you @TheCoderAdi for your contribution 🚀 👏
Left some minor comments

[yassinedorbozgithub]

Can you please format the code by running this command
npm run lint:fix

[yassinedorbozgithub]

Thank you @TheCoderAdi for being very responsive 🚀

[TheCoderAdi]

Thank you @TheCoderAdi for being very responsive 🚀

Thanks! Looking forward to more feedback and improvements together.