CODEWITHSUNDEEP
reactjsantd
Khadar111
Khadar111

Reputation: 171

Ant Design table continues to show loading even when the table is populated by data

I'm using Ant design in my front end project. I have a table component, which gets populated by data from an API. It takes some time to fetch the data, so I want to show a loading spinner.

<Table
  columns={queueColumns}
  dataSource={queueData}
  loading={{ indicator: <div><Spin /></div>}} 
/>

My problem is, even after the table is loaded with the data, my table continues to show the loading spinner.

How can I make the spinner vanish when the table is filled with data?

I suspect I would need to put a condition in loading prop of the Table component. But I'm not sure how to go about that

Edit: I'm fetching data like this:

    const [queueData, setQueueData] = useState('');

    useEffect(() => {        
        var config = {
          method: 'GET',
          url: '/api/queues',
          headers: { 
            'Content-Type': 'application/json'
          }
        };
        axios(config)
        .then(function (response) {
            setQueueData(response.data)
        }) 
      }, [])

Upvotes: 4

Views: 15586

Answers (2)

Austyns
Austyns

Reputation: 760

To show loader/spinner while fetching date from the server, add the loading property to the Antd table I.E:

loading={{ indicator: <div><Spin /></div>, spinning:!queueData}}

Upvotes: 3

Ardeshir Izadi
Ardeshir Izadi

Reputation: 1073

Unfortunately there is a lack of documentation for Ant's Table component. To indicate that your table is loading or not you can pass loading={true} or loading={false}. To set custom spinner you can set loading={{indicator: <MyBeautifulSpinner/>, spinning: true/false}}. that spinning property indicates that whether table is in loading mode or not. You need to have a state, which is altered after data is fetched. See more on Ant's table loading:

https://github.com/ant-design/ant-design/blob/master/components/table/Table.tsx#L457

Upvotes: 5

Related Questions