TobaOjo/Mav-Mobile-UI
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added async loading state

Browse Source
This commit is contained in:
Toba Ojo
2025-10-07 14:05:27 +01:00
parent c2c2fc76f2
commit d927767677
2 changed files with 42 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/components/SettingForms/BearerType/BearerTypeFields.tsx
View File

@@ -24,8 +24,8 @@ const BearerTypeFields = () => {
verbose: verbose === "true", verbose: verbose === "true",
}; };
const handleSubmit = (values: BearerTypeFieldType) => { const handleSubmit = async (values: BearerTypeFieldType) => {
dispatcherMutation.mutate(values); await dispatcherMutation.mutateAsync(values);
}; };
return ( return (
@@ -34,37 +34,41 @@ const BearerTypeFields = () => {
onSubmit={handleSubmit} onSubmit={handleSubmit}
enableReinitialize enableReinitialize
> >
<Form> {({ isSubmitting }) => (
<div className="flex flex-col space-y-4 px-2"> <Form>
<FormGroup> <div className="flex flex-col space-y-4 px-2">
<label htmlFor="format">Format</label> <FormGroup>
<Field <label htmlFor="format">Format</label>
as="select" <Field
name="format" as="select"
id="format" name="format"
className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60" id="format"
className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
>
{options?.map((option: string) => (
<option key={option} value={option}>
{option}
</option>
))}
</Field>
</FormGroup>
<FormGroup>
<div className="flex flex-col space-y-4">
<FormToggle name="enabled" label="Enabled" />
<FormToggle name="verbose" label="Verbose" />
</div>
</FormGroup>
<button
type="submit"
className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full md:w-[50%]"
> >
{options?.map((option: string) => ( {isSubmitting || dispatcherMutation.isPending
<option key={option} value={option}> ? "Saving..."
{option} : "Save Changes"}
</option> </button>
))} </div>
</Field> </Form>
</FormGroup> )}
<FormGroup>
<div className="flex flex-col space-y-4">
<FormToggle name="enabled" label="Enabled" />
<FormToggle name="verbose" label="Verbose" />
</div>
</FormGroup>
<button
type="submit"
className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full md:w-[50%]"
>
Save Changes
</button>
</div>
</Form>
</Formik> </Formik>
); );
}; };

10
src/components/SettingForms/Channel1-JSON/ChannelFields.tsx
View File

@@ -30,8 +30,8 @@ const ChannelFields = () => {
readTimeoutSeconds: Number(readTimeoutSeconds), readTimeoutSeconds: Number(readTimeoutSeconds),
}; };
const handleSubmit = (values: InitialValuesForm) => { const handleSubmit = async (values: InitialValuesForm) => {
backOfficeMutation.mutate(values); await backOfficeMutation.mutateAsync(values);
}; };
const ValidationToastOnce = () => { const ValidationToastOnce = () => {
@@ -84,7 +84,7 @@ const ChannelFields = () => {
enableReinitialize enableReinitialize
validate={validateValues} validate={validateValues}
> >
{({ errors, touched }) => ( {({ errors, touched, isSubmitting }) => (
<Form> <Form>
<div className="flex flex-col space-y-2 px-2"> <div className="flex flex-col space-y-2 px-2">
<FormGroup> <FormGroup>
@@ -172,7 +172,9 @@ const ChannelFields = () => {
type="submit" type="submit"
className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full md:w-[50%]" className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full md:w-[50%]"
> >
Save Changes {isSubmitting || backOfficeMutation.isPending
? "Saving..."
: "Save Changes"}
</button> </button>
<ValidationToastOnce /> <ValidationToastOnce />
</Form> </Form>