diff --git a/packages/widgets/src/downloads/component.tsx b/packages/widgets/src/downloads/component.tsx index e518ecc93..294559735 100644 --- a/packages/widgets/src/downloads/component.tsx +++ b/packages/widgets/src/downloads/component.tsx @@ -124,7 +124,7 @@ export default function DownloadClientsWidget({ integrationIds.includes(id) ? [id] : [], ); - const { data: currentItems = [] } = clientApi.widget.downloads.getJobsAndStatuses.useQuery({ + const { data: currentItems = [], isFetching } = clientApi.widget.downloads.getJobsAndStatuses.useQuery({ integrationIds, limitPerIntegration: options.limitPerIntegration, }); @@ -326,19 +326,29 @@ export default function DownloadClientsWidget({ sortable: true, width: width < 400 ? 80 : 120, ...getColumnMeta("progress"), - render: (record) => ( - - - {`${Math.floor(record.progress * 100)}%`} - - - - ), + render: (record) => { + const pct = Math.floor(record.progress * 100); + const tooltipLabel = [ + `${formatBytes(record.received)} / ${formatBytes(record.size)}`, + record.downSpeed ? `↓ ${formatByteRate(record.downSpeed)}` : null, + record.time !== 0 ? `ETA: ${dayjs().add(record.time, "milliseconds").fromNow(true)}` : null, + ].filter(Boolean).join(" · "); + return ( + + + + {`${pct}%`} + + + + + ); + }, }, shouldIncludeColumn("size") && { accessor: "size", @@ -550,6 +560,8 @@ export default function DownloadClientsWidget({ stripedColor={{ dark: "dark.7", light: "gray.0" }} highlightOnHoverColor={{ dark: "dark.5", light: "gray.1" }} verticalAlign="center" + fetching={isFetching && currentItems.length === 0} + loaderBackgroundBlur={2} fz={size.fontSize} records={sortedData} columns={effectiveColumns}