Administrator/Multi-Debrid-Downloader
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 596 Wiki Activity

Prevent collector snapshot rerender stalls

Browse Source 
Memoize the collector content across unrelated app snapshots and release collapsed child rows from the DOM after their closing animation. Draw the idle speed sparkline as a pixel-aligned one-physical-pixel stroke so its thickness remains uniform across display scales.
This commit is contained in:
Sucukdeluxe
2026-08-26 14:09:01 +02:00
parent 14525fa4c3
commit da4c2fb069
5 changed files with 84 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/App.tsx
+29 -7
View File
@@ -74,8 +74,8 @@ import {
type CollectorWorkspaceFilter
} from "./views/collector/collector-model";
import {
CollectorContent,
CollectorInputDialog,
MemoizedCollectorContent,
CollectorSidebar,
CollectorToolbar,
type CollectorViewActions
@@ -1120,6 +1120,15 @@ export function readDownloadSpeedSparklinePalette(
};
}
export function getIdleSparklineStroke(cssHeight: number, devicePixelRatio: number): { y: number; lineWidth: number } {
const dpr = Number.isFinite(devicePixelRatio) && devicePixelRatio > 0 ? devicePixelRatio : 1;
const baseline = Math.max(0, cssHeight - 2);
return {
y: (Math.floor(baseline * dpr) + 0.5) / dpr,
lineWidth: 1 / dpr
};
}
export function appendBandwidthSample(
history: { time: number; speed: number }[],
speed: number,
@@ -1337,16 +1346,29 @@ const DownloadSpeedSparkline = memo(function DownloadSpeedSparkline({ speedBps,
const rootStyle = getComputedStyle(document.documentElement);
const palette = readDownloadSpeedSparklinePalette((property) => rootStyle.getPropertyValue(property));
let maxV = 0;
for (const v of hist) if (v > maxV) maxV = v;
maxV = Math.max(maxV, 1024 * 1024);
let maxV = 0;
for (const v of hist) if (v > maxV) maxV = v;
const idle = maxV <= 0;
maxV = Math.max(maxV, 1024 * 1024);
const pad = 2;
const h = cssH - pad * 2;
const step = cssW / (DOWNLOAD_SPEED_MAX_SAMPLES - 1);
const startIdx = DOWNLOAD_SPEED_MAX_SAMPLES - hist.length;
const px = (i: number): number => (startIdx + i) * step;
const py = (v: number): number => pad + h - (v / maxV) * h;
const px = (i: number): number => (startIdx + i) * step;
const py = (v: number): number => pad + h - (v / maxV) * h;
if (idle) {
const stroke = getIdleSparklineStroke(cssH, dpr);
ctx.beginPath();
ctx.moveTo(px(0), stroke.y);
ctx.lineTo(px(hist.length - 1), stroke.y);
ctx.strokeStyle = palette.accent;
ctx.lineWidth = stroke.lineWidth;
ctx.lineCap = "butt";
ctx.stroke();
return;
}
ctx.beginPath();
ctx.moveTo(px(0), py(hist[0]));
@@ -6245,7 +6267,7 @@ export function App(): ReactElement {
>
<main className="md-runtime-view-content">
{tab === "collector" && (
<CollectorContent actions={collectorActions} model={collectorViewModel} />
<MemoizedCollectorContent actions={collectorActions} model={collectorViewModel} />
)}
{tab === "downloads" && <DownloadsContent actions={downloadsActions} model={downloadsViewModel} />}