genetic-orange•2y ago

Debounce on list table CRUD search

 const { tableProps, searchFormProps } = useTable<IUser, HttpError, IUserFilterVariables>({
        syncWithLocation: true,
        onSearch: (params) => {
            const filters: CrudFilters = []
            const { team_name } = params
            filters.push(
                {
                    field: "team_name",
                    operator: "contains",
                    value: team_name,
                },
            );

            return filters;
        },
    });

 const { tableProps, searchFormProps } = useTable<IUser, HttpError, IUserFilterVariables>({
        syncWithLocation: true,
        onSearch: (params) => {
            const filters: CrudFilters = []
            const { team_name } = params
            filters.push(
                {
                    field: "team_name",
                    operator: "contains",
                    value: team_name,
                },
            );

            return filters;
        },
    });

  <Form
                {...searchFormProps}
                layout="horizontal"
                onValuesChange={() => searchFormProps.form?.submit()}
            >
                <Space wrap>
                    <Form.Item name="team_name">
                        <Input
                            placeholder="Team 01, etc."
                            prefix={<SearchOutlined />}
                        />
                    </Form.Item>
                </Space>
            </Form>

  <Form
                {...searchFormProps}
                layout="horizontal"
                onValuesChange={() => searchFormProps.form?.submit()}
            >
                <Space wrap>
                    <Form.Item name="team_name">
                        <Input
                            placeholder="Team 01, etc."
                            prefix={<SearchOutlined />}
                        />
                    </Form.Item>
                </Space>
            </Form>

Add debounce on search

7 Replies

kapa.ai•2y ago

Hi @tads8799. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To add debounce on search, you can use the debounce property in the useSelect hook. The debounce property allows you to delay the execution of the onSearch function until after a certain amount of time has passed since the last time it was invoked. Here's how you can do it:

const { selectProps } = useSelect<ICategory>({  
 resource: "categories",  
 debounce: 500,  // Add debounce here
 onSearch: (value) => [  
 {  
 field: "title",  
 operator: "contains",  
 value,  
 },  
 ],  
});

const { selectProps } = useSelect<ICategory>({  
 resource: "categories",  
 debounce: 500,  // Add debounce here
 onSearch: (value) => [  
 {  
 field: "title",  
 operator: "contains",  
 value,  
 },  
 ],  
});

In this example, the onSearch function will be debounced by 500 milliseconds. This means that the function will not be called until 500 milliseconds have passed since the last time it was invoked. Please note that the debounce property is not available in the useTable hook based on the provided extracts. If you want to add debounce to the useTable hook, you might need to implement it manually or check if there's an update in the refine documentation that includes this feature. For more information, you can refer to the useSelect documentation (https://refine.dev/docs/api-reference/antd/hooks/field/useSelect/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

<@577213996344803338> kapa.ai is still learning and improving, please let us know how it did by reacting below

genetic-orangeOP•2y ago

I'm using useTable, not useSelect @kapa.ai

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I apologize for the confusion. Based on the provided extracts, the debounce property is not directly available in the useTable hook. However, you can implement a debounce functionality manually in the onSearch function using a debounce utility function. Here's a basic example of how you can create a debounce function:

function debounce(func, wait) {
    let timeout;

    return function executedFunction(...args) {
        const later = () => {
            clearTimeout(timeout);
            func(...args);
        };

        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    };
};

function debounce(func, wait) {
    let timeout;

    return function executedFunction(...args) {
        const later = () => {
            clearTimeout(timeout);
            func(...args);
        };

        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    };
};

You can then use this function to debounce your onSearch function:

const debouncedOnSearch = debounce((params) => {
    const filters: CrudFilters = []
    const { team_name } = params
    filters.push(
        {
            field: "team_name",
            operator: "contains",
            value: team_name,
        },
    );

    return filters;
}, 500);  // 500ms debounce time

const { tableProps, searchFormProps } = useTable<IUser, HttpError, IUserFilterVariables>({
    syncWithLocation: true,
    onSearch: debouncedOnSearch,
});

const debouncedOnSearch = debounce((params) => {
    const filters: CrudFilters = []
    const { team_name } = params
    filters.push(
        {
            field: "team_name",
            operator: "contains",
            value: team_name,
        },
    );

    return filters;
}, 500);  // 500ms debounce time

const { tableProps, searchFormProps } = useTable<IUser, HttpError, IUserFilterVariables>({
    syncWithLocation: true,
    onSearch: debouncedOnSearch,
});

Please note that this is a basic example and might need to be adjusted based on your specific use case. If you want to add debounce to the useTable hook, you might need to check if there's an update in the refine documentation that includes this feature. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

<@577213996344803338> kapa.ai is still learning and improving, please let us know how it did by reacting below

genetic-orangeOP•2y ago

Fixed it to

 onValuesChange={debounce(() => {
                    searchFormProps.form?.submit()
                }, 500)}

 onValuesChange={debounce(() => {
                    searchFormProps.form?.submit()
                }, 500)}

with lodash

genetic-orange•16mo ago

ye, nice work bro

Debounce on list table CRUD search

Did you find this page helpful?