feat: further optimisation for massive conversions

src/lib/components/functional/ConversionPanel.svelte

@@ -4,12 +4,20 @@
 	import Panel from "../visual/Panel.svelte";
 	import Dropdown from "./Dropdown.svelte";
 	import Tooltip from "../visual/Tooltip.svelte";
+	import ProgressBar from "../visual/ProgressBar.svelte";
+	import { fade } from "$lib/animation";
+
+	const length = $derived(files.files.length);
+	const progress = $derived(files.files.filter((f) => f.result).length);
 </script>
 
-<Panel
+<Panel class="flex flex-col gap-4">
+	<div
 		class="w-full h-auto flex items-center justify-between flex-col md:flex-row gap-4"
->
-	<div class="flex items-center flex-col md:flex-row gap-2.5 max-md:w-full">
+	>
+		<div
+			class="flex items-center flex-col md:flex-row gap-2.5 max-md:w-full"
+		>
 			<button
 				onclick={() => files.convertAll()}
 				class="btn {$effects
@@ -21,7 +29,9 @@
 				<p>Convert all</p>
 			</button>
 			<button
-			class="btn {$effects ? '' : '!scale-100'} flex gap-3 max-md:w-full"
+				class="btn {$effects
+					? ''
+					: '!scale-100'} flex gap-3 max-md:w-full"
 				disabled={!files.ready || !files.results}
 				onclick={() => files.downloadAll()}
 			>
@@ -60,7 +70,9 @@
 				<!-- cannot convert to svg or heif -->
 				{@const supported = files.files[0]?.converters
 					.flatMap((c) => c.supportedFormats)
-				?.filter((format) => format !== ".svg" && format !== ".heif")}
+					?.filter(
+						(format) => format !== ".svg" && format !== ".heif",
+					)}
 				<Dropdown
 					onselect={(r) =>
 						files.files.forEach((f) => {
@@ -73,4 +85,15 @@
 				<Dropdown options={["N/A"]} disabled />
 			{/if}
 		</div>
+	</div>
+	{#if files.files.length > 50}
+		<div class="w-full px-2 flex gap-4 items-center">
+			<div class="flex-shrink-0 -mt-0.5 font-normal text-sm text-muted">
+				{progress}/{length}
+			</div>
+			<div class="flex-grow">
+				<ProgressBar min={0} max={length} {progress} />
+			</div>
+		</div>
+	{/if}
 </Panel>

src/lib/store/index.svelte.ts

@@ -23,7 +23,12 @@ class Files {
 		this.files.length === 0 ? false : this.files.every((f) => f.result),
 	);
 
+	private thumbnailQueue = new PQueue({
+		concurrency: navigator.hardwareConcurrency || 4,
+	});
+
 	private _addThumbnail = async (file: VertFile) => {
+		this.thumbnailQueue.add(async () => {
 			const isAudio = converters
 				.find((c) => c.name === "ffmpeg")
 				?.supportedFormats?.includes(file.from.toLowerCase());
@@ -60,6 +65,7 @@ class Files {
 			} catch (e) {
 				error(["files"], e);
 			}
+		});
 	};
 
 	private async _generateThumbnailFromMedia(

src/lib/types/file.svelte.ts

@@ -29,7 +29,6 @@ export class VertFile {
 		const converter = this.converters.filter((converter) =>
 			converter.supportedFormats.map((f) => supportedFormats.includes(f)),
 		);
-		console.log(this.converters, supportedFormats);
 		return converter;
 	}