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:
----------------------<@706071614717952071> kapa.ai is still learning and improving, please let us know how it did by reacting below
conscious-sapphire•8mo ago
@kapa.ai how to add loading icon while fetching from data provider?
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:
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:
----------------------<@706071614717952071> kapa.ai is still learning and improving, please let us know how it did by reacting below
conscious-sapphire•8mo ago
how to do this on list page?
@kapa.ai how to do this on list page?
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:
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:
----------------------<@706071614717952071> kapa.ai is still learning and improving, please let us know how it did by reacting below
conscious-sapphire•8mo ago
ok.. I've found the solution using mantine