show loading icon while waiting list page

how to show loading icon while loading list page using mantine ui framework?

9 Replies

Hi @yohan. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To show a loading icon while loading the List page using the Mantine UI framework in Refine, you can use the isLoading property of the <List/> component. However, the specific code for this is not provided in the extracts. You can refer to the Refine documentation (https://refine.dev/docs/ui-integrations/mantine/components/basic-views/list) for more details and examples. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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

extended-salmon•6mo ago

@kapa.ai how to add loading icon while fetching from data provider?

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- In Refine, when you're fetching data from a data provider, you can use the isLoading property returned by the data hooks (useOne, useList, useUpdate, etc.) to show a loading icon or any loading state while the data is being fetched. Here's an example from the extracts using the useOne hook:

import { useOne } from "@refinedev/core";

export const HomePage = () => {
    const { data: product, isLoading: isLoadingProduct } = useOne<IProduct>({
        resource: "products",
        id: 123,
        dataProviderName: "default",
    });

    const { data: user, isLoading: isLoadingUser } = useOne<IUser>({
        resource: "users",
        id: 123,
        dataProviderName: "fineFoods",
    });

    if (isLoadingProduct || isLoadingUser) return <div>Loading...</div>;

    // Rest of your component
};

import { useOne } from "@refinedev/core";

export const HomePage = () => {
    const { data: product, isLoading: isLoadingProduct } = useOne<IProduct>({
        resource: "products",
        id: 123,
        dataProviderName: "default",
    });

    const { data: user, isLoading: isLoadingUser } = useOne<IUser>({
        resource: "users",
        id: 123,
        dataProviderName: "fineFoods",
    });

    if (isLoadingProduct || isLoadingUser) return <div>Loading...</div>;

    // Rest of your component
};

In this example, isLoadingProduct and isLoadingUser are boolean values that indicate whether the data is being loaded. If either is true, a "Loading..." message is displayed. You can replace <div>Loading...</div> with any loading icon or component you want to use. For more information, you can refer to the Refine documentation on data fetching (https://refine.dev/docs/guides-concepts/data-fetching). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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

extended-salmon•6mo ago

how to do this on list page? @kapa.ai how to do this on list page?

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- In a List page, you can use the isLoading property returned by the useTable hook to show a loading icon while the data is being fetched. Here's an example based on the extracts:

import { useTable } from "@refinedev/antd";  
import { Table } from "antd";  

const PostList: React.FC = () => {  
 const { tableProps, isLoading } = useTable<IPost>({  
 syncWithLocation: true,  
 });  

 if (isLoading) {
   return <div>Loading...</div>; // Replace with your loading icon or component
 }

 return (  
 <List>  
 <Table {...tableProps} rowKey="id">  
 <Table.Column dataIndex="id" title="ID" />  
 <Table.Column dataIndex="title" title="Title" />  
 {/* ...rest of your columns */}
 </Table>  
 </List>  
 );  
};

import { useTable } from "@refinedev/antd";  
import { Table } from "antd";  

const PostList: React.FC = () => {  
 const { tableProps, isLoading } = useTable<IPost>({  
 syncWithLocation: true,  
 });  

 if (isLoading) {
   return <div>Loading...</div>; // Replace with your loading icon or component
 }

 return (  
 <List>  
 <Table {...tableProps} rowKey="id">  
 <Table.Column dataIndex="id" title="ID" />  
 <Table.Column dataIndex="title" title="Title" />  
 {/* ...rest of your columns */}
 </Table>  
 </List>  
 );  
};

In this example, if isLoading is true, a "Loading..." message is displayed. You can replace <div>Loading...</div> with any loading icon or component you want to use. For more information, you can refer to the Refine documentation on useTable (https://refine.dev/docs/api-reference/antd/hooks/table/useTable/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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

extended-salmon•6mo ago

ok.. I've found the solution using mantine

const {
    getHeaderGroups,
    getRowModel,
    setOptions,
    refineCore: {
        setCurrent,
        pageCount,
        current,
        tableQueryResult: { isLoading: loading, data: tableData },
    },
} = useTable({
    columns,
});

if (loading) {
    return (
        <div style={{ width: "100%", height: "200px", textAlign: "center", verticalAlign: "middle", lineHeight: "200px" }}>
            Please wait <Loader color="blue" size={15} />
        </div>
    );
}

const {
    getHeaderGroups,
    getRowModel,
    setOptions,
    refineCore: {
        setCurrent,
        pageCount,
        current,
        tableQueryResult: { isLoading: loading, data: tableData },
    },
} = useTable({
    columns,
});

if (loading) {
    return (
        <div style={{ width: "100%", height: "200px", textAlign: "center", verticalAlign: "middle", lineHeight: "200px" }}>
            Please wait <Loader color="blue" size={15} />
        </div>
    );
}