add feedback such as antd spin to save button of create form

for my app, the save button of Create takes much time to complete, so I want add feedback such as antd spin to the page

2 Replies

Hi @iamhere2007. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To add feedback such as an Ant Design Spin component to the save button of a Create form in refine, you can utilize the saveButtonProps and formLoading properties provided by the useForm hook. Here's how you can implement this: 1. First, use the useForm hook to get the necessary props:

import { Create, useForm } from "@refinedev/antd";
import { Form, Input, Spin } from "antd";

const PostCreate: React.FC = () => {
  const { formProps, saveButtonProps, formLoading } = useForm();

  return (
    <Create 
      saveButtonProps={{
        ...saveButtonProps,
        loading: formLoading,
      }}
    >
      <Form {...formProps} layout="vertical">
        {/* Your form fields here */}
      </Form>
    </Create>
  );
};

import { Create, useForm } from "@refinedev/antd";
import { Form, Input, Spin } from "antd";

const PostCreate: React.FC = () => {
  const { formProps, saveButtonProps, formLoading } = useForm();

  return (
    <Create 
      saveButtonProps={{
        ...saveButtonProps,
        loading: formLoading,
      }}
    >
      <Form {...formProps} layout="vertical">
        {/* Your form fields here */}
      </Form>
    </Create>
  );
};

In this example, we're passing the loading state to the saveButtonProps. The formLoading property from useForm will automatically handle the loading state of the form submission. 2. The <Create> component will use these props to display a loading indicator on the save button when the form is being submitted. This approach is documented in the Create component documentation (https://refine.dev/docs/ui-integrations/ant-design/components/basic-views/create/#savebuttonprops) and the useForm hook documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-form/#return-values-1). By using this method, you'll get a built-in loading indicator on the save button when the form is being submitted, providing feedback to the user that the action is in progress. If you need more custom behavior or want to add additional loading indicators to the page, you can use the formLoading state to conditionally render Ant Design's <Spin> component or other loading indicators in your form. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@1318415797114114110> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

add feedback such as antd spin to save button of create form

Did you find this page helpful?