Id

---------------------- To display a skeleton loading state in Ant Design while the query is fetching on a show page in refine, you can use the `isLoading` property of the `` component. Here's how you can implement it: 1. First, make sure you're using the `` component from `@refinedev/antd`. 2. Use the `isLoading` prop of the `` component to control when the skeleton should be displayed. 3. Inside the `` component, you can use Ant Design's `Skeleton` component to create the loading state. Here's an example of how you can implement this: ```jsx import { Show } from "@refinedev/antd"; import { Typography, Skeleton } from "antd"; import { useShow } from "@refinedev/core"; const { Title, Text } = Typography; const PostShow = () => { const { queryResult } = useShow(); const { data, isLoading } = queryResult; const record = data?.data; return ( {isLoading ? ( ) : ( <> Id {record?.id} Title {record?.title} {/* Add more fields as needed */} )} ); }; ``` In this example: 1. We use the `useShow` hook to get the `queryResult`, which includes `isLoading` and `data`. 2. We pass `isLoading` to the `` component's `isLoading` prop. 3. Inside the `` component, we use a conditional render: - If `isLoading` is true, we render an Ant Design `Skeleton` component. - If `isLoading` is false, we render the actual content. This approach will display a skeleton loading state while the query is fetching, and then show the actual content once the data is available.

How can display skeleton antd at show page while query is fetching?

Similar Threads

Similar Threads

Similar Threads