Closed
Description
{
field: 'actions',
title: 'single line',
width: 120,
icon: (cell) => {
const record = cell.table.getCellOriginRecord(cell.col, cell.row);
const isDeleting = deleting[record.id];
return [
{
name: 'delete',
type: 'svg',
marginLeft: 20,
positionType: VTable.TYPES.IconPosition.left,
width: 20,
height: 20,
// Use a simpler spinning circle
svg: isDeleting
? `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="animation: spin 1s linear infinite; transform-origin: center;">
<circle cx="12" cy="12" r="10" stroke="#6b7280" stroke-width="2" fill="none"/>
</svg>`
: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/delete.svg',
tooltip: {
style: { arrowMark: true },
title: isDeleting ? 'Deleting...' : 'Delete',
placement: VTable.TYPES.Placement.right,
},
cursor: isDeleting ? 'not-allowed' : 'pointer',
},
];
},
},How to make this Svg spinning when isDeleting being set true? Or is there a better way to dynamically show a spinning element?
Metadata
Metadata
Assignees
Labels
No labels