Généraliser l'utilisation du loading dans chaque item de State
Valeur ajoutée
Permettra d'améliorer grndement l'UX en n'affichant un état de chargement uniquement pour l'objet modifié lors d'un update.
Exemple
Code utilisé dans src/state/stays.ts :
.addCase(editBedStayNote.pending, (state, action) => {
if (!action.meta.arg.oldNoteId) return state
const stay: Stay | undefined = _.values(state.entities).find(
(s) => s && (s.notes ?? []).some(_.matches({ uuid: action.meta.arg.oldNoteId }))
)
if (!stay) return state
const note = _.find(stay.notes ?? [], _.matches({ uuid: action.meta.arg.oldNoteId }))
_.assign(note, { loading: true })
})
Et comment c'est utilisé dans l'UI (src/components/CareService/Bed/TodoBed/Todo.tsx) :
const getTodoList = (): State<PatientNote> | undefined =>
(stays.entities[bed.currentPatientStay ?? '']?.notes ?? []).find(_.matches({ type: 'todo' }))
...
<TextActions
onCancel={cancelEditDial}
onSubmit={onSubmit}
loading={!!todoList?.loading}
variant="cancel"
changeCheck={!!editedData.content && editedData.content != todoList?.content}
/>