Comment mettre un chargeur dans une table imbriquée dans antd ?

Question

J'ai un tableau imbriqué dans antd, dans lequel lorsque je clique sur une ligne, il se développe et un nouveau tableau s'ouvre. Illustré ici .

Mais il faut un certain temps pour récupérer les données de la table imbriquée (je les récupère via une API). J'ai besoin de mettre un loader/spinner dans la table imbriquée pour indiquer que les données ne sont pas encore disponibles à l'affichage. Comment puis-je réaliser cela dans antd ?

J'ai essayé de faire ce qui suit, mais cela n'a pas fonctionné :

//(Outer table) 
<Table key="campaignListByDate-table" 
    columns={campaignDateColumns}
    expandable={{ expandedRowRender }}
    loading={{
     indicator: <div><Spin /></div>,
     spinning: !campaignList
    }}
    dataSource={campaignList} 
    />

//Inner table ( The one that opens when u click on the "+" sign of a row. 

<Table 
  columns={columnsExpanded}
  dataSource={emailRate} 
  pagination={false} 
  loading={{
    indicator: <div><Spin /></div>,
    spinning: !emailRate
 }}/>

CampaignList: 
[
    {
        "id": "27813f63-aee2-4c69-bf5d-9e4ac8",
        "name": "bnce",
        "templateId": "ae7e094f-1735-4a31-bc67-95bd3d",
        "userId": "3122be78-703d-4621-92f0-8a2bd8",
        "createdAt": 1604984929337,
    },
    {
        "id": "438e0cd9-a550-453a-8a5b-4bd37",
        "name": "asd",
        "templateId": "ae7e094f-1735-4a31-bc67-95bd3",
        "userId": "3122be78-703d-4621-92f0-8a2bd87",
        "createdAt": 1604985347370,
    },

]

EmailRate: 
[
    {
        "time": "2020-11-11 11 : 39",
        "count": 3,
        "key": "2020-11-11 11 : 39"
    }
]

Answer 1

D'après votre code, je suppose que vous essayez de mettre ![ ] en rotation lorsque vous n'avez pas de données. Mais ![ ] ne retournera pas vrai.

Exemple :

//When you have some data
console.log(!['something to avoid empty array'])

//when you do not have any data
console.log(![])

Les deux cas renverront false et votre chargeur ne sera pas activé.

Essayez d'utiliser des variables d'état booléennes et affectez true et false à ces variables avant et après la récupération des données, puis affectez-les au compteur de table.