plain-purple
plain-purple4mo ago

show loading icon while waiting list page

how to show loading icon while loading list page using mantine ui framework?
9 Replies
kapa.ai
kapa.ai4mo ago
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
kapa.ai4mo ago
<@706071614717952071> kapa.ai is still learning and improving, please let us know how it did by reacting below
plain-purple
plain-purple4mo ago
@kapa.ai how to add loading icon while fetching from data provider?
kapa.ai
kapa.ai4mo 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
kapa.ai4mo ago
<@706071614717952071> kapa.ai is still learning and improving, please let us know how it did by reacting below
plain-purple
plain-purple4mo ago
how to do this on list page? @kapa.ai how to do this on list page?
kapa.ai
kapa.ai4mo 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
kapa.ai4mo ago
<@706071614717952071> kapa.ai is still learning and improving, please let us know how it did by reacting below
plain-purple
plain-purple4mo 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>
);
}