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}