Metronic Mega Update!Tailwind 4, React 19, Next.js 15, KtUI, ReUI, eCommerce, User Management Apps and more
Explore Update 
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={isUserLoading || 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)
Thanks!
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
