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

2 Replies

Hi @tingadev. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- 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 <Show> component. Here's how you can implement it: 1. First, make sure you're using the <Show> component from @refinedev/antd. 2. Use the isLoading prop of the <Show> component to control when the skeleton should be displayed. 3. Inside the <Show> component, you can use Ant Design's Skeleton component to create the loading state. Here's an example of how you can implement this:

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 (
    <Show isLoading={isLoading}>
      {isLoading ? (
        <Skeleton active paragraph={{ rows: 5 }} />
      ) : (
        <>
          <Title level={5}>Id</Title>
          <Text>{record?.id}</Text>

          <Title level={5}>Title</Title>
          <Text>{record?.title}</Text>

          {/* Add more fields as needed */}
        </>
      )}
    </Show>
  );
};

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 (
    <Show isLoading={isLoading}>
      {isLoading ? (
        <Skeleton active paragraph={{ rows: 5 }} />
      ) : (
        <>
          <Title level={5}>Id</Title>
          <Text>{record?.id}</Text>

          <Title level={5}>Title</Title>
          <Text>{record?.title}</Text>

          {/* Add more fields as needed */}
        </>
      )}
    </Show>
  );
};

In this example: 1. We use the useShow hook to get the queryResult, which includes isLoading and data. 2. We pass isLoading to the <Show> component's isLoading prop. 3. Inside the <Show> 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. Ant Design Show Component (https://refine.dev/docs/ui-integrations/ant-design/components/basic-views/show/#isloading) Remember that the exact implementation might vary depending on your specific use case and the structure of your data. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5w ago

<@761921731505946634> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

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

Did you find this page helpful?