indicator-label and indicator-progress in UserEditModalForm.tsx - make the spinner appear (User Management app)
Hi,
On UserEditModalForm.tsx there is a button:
<button
type='submit'
className='btn btn-primary'
data-kt-users-modal-action='submit'
disabled || formik.isSubmitting || !formik.isValid || !formik.touched}
>
<span className='indicator-label'>Submit</span>
{(formik.isSubmitting || isUserLoading) && (
<span className='indicator-progress'>
Please wait...{' '}
<span className='spinner-border spinner-border-sm align-middle ms-2'></span>
</span>
)}
</button>I'm trying to display the
span with the class indicator-progress but it won't show up when I click the submit button.I noticed there are some classes in the file _indicator.scss:
//
// Indicator
//.indicator-progress {
display: none;
[data-kt-indicator="on"] > & {
display: inline-block;
}
}
.indicator-label {
[data-kt-indicator="on"] > & {
display: none;
}
}
I don't see data-kt-indicator anywhere else though.
What do I need to do in order to make Please wait... with the spinner appear when I click on the submit button?
Replies (2)
Hi,
Sorry for the later reply.
In our UserEditModalForm.tsx we are using a different loading approach, if you want to enable loading inside a button you can render button content conditionally as shown below.
const [loadingState, setLoadingState] = useState(false);<button
type='submit'
className='btn btn-primary'
data-kt-indicator={ loadingState ? "on" : "off" }
>
{ !loadingState && <span className='indicator-label'>Submit</span> }
{ loadingState && (
<span className='indicator-progress'>
Please wait...{' '}
<span className='spinner-border spinner-border-sm align-middle ms-2'></span>
</span>
) }
</button>
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Thanks!
