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",
};
const handleSubmit = (values: BearerTypeFieldType) => {
dispatcherMutation.mutate(values);
const handleSubmit = async (values: BearerTypeFieldType) => {
await dispatcherMutation.mutateAsync(values);
};
return (
@@ -34,37 +34,41 @@ const BearerTypeFields = () => {
onSubmit={handleSubmit}
enableReinitialize
>
<Form>
<div className="flex flex-col space-y-4 px-2">
<FormGroup>
<label htmlFor="format">Format</label>
<Field
as="select"
name="format"
id="format"
className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
{({ isSubmitting }) => (
<Form>
<div className="flex flex-col space-y-4 px-2">
<FormGroup>
<label htmlFor="format">Format</label>
<Field
as="select"
name="format"
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) => (
<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%]"
>
Save Changes
</button>
</div>
</Form>
{isSubmitting || dispatcherMutation.isPending
? "Saving..."
: "Save Changes"}
</button>
</div>
</Form>
)}
</Formik>
);
};

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

@@ -30,8 +30,8 @@ const ChannelFields = () => {
readTimeoutSeconds: Number(readTimeoutSeconds),
};
const handleSubmit = (values: InitialValuesForm) => {
backOfficeMutation.mutate(values);
const handleSubmit = async (values: InitialValuesForm) => {
await backOfficeMutation.mutateAsync(values);
};
const ValidationToastOnce = () => {
@@ -84,7 +84,7 @@ const ChannelFields = () => {
enableReinitialize
validate={validateValues}
>
{({ errors, touched }) => (
{({ errors, touched, isSubmitting }) => (
<Form>
<div className="flex flex-col space-y-2 px-2">
<FormGroup>
@@ -172,7 +172,9 @@ const ChannelFields = () => {
type="submit"
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>
<ValidationToastOnce />
</Form>