Add CircularProgress to ChecheAwtis

components/awtis/cheche-awtis.js

@@ -2,7 +2,9 @@ import {useEffect, useState} from 'react'
 import {useRouter} from 'next/router'
 import TextField from '@mui/material/TextField'
 import Autocomplete from '@mui/material/Autocomplete'
-import {Avatar, Container} from '@mui/material'
+import Avatar from '@mui/material/Avatar'
+import CircularProgress from '@mui/material/CircularProgress'
+import Container from '@mui/material/Container'
 
 import {jwennToutAwtis} from '../../lib/oki-api'
 
@@ -65,7 +67,21 @@ export default function ChecheAwtis() {
           </li>
         )}
         sx={{width: 300}}
-        renderInput={params => <TextField {...params} label='Rechercher un artiste' />}
+        renderInput={params => (
+          <TextField
+            {...params}
+            label='Rechercher un artiste'
+            InputProps={{
+              ...params.InputProps,
+              endAdornment: (
+                <>
+                  {loading ? <CircularProgress color='primary' size={20} /> : null}
+                  {params.InputProps.endAdornment}
+                </>
+              ),
+            }}
+          />
+        )}
         onChange={(event, newValue) => {
           router.push(`/awtis/${newValue.slug}`)
         }}