fix(reactivity) ensure proper state updates after events and status i…

…ndicators for uploading

src/lib/components/AudioViz.svelte

@@ -12,7 +12,7 @@
 	let waveformElement;
 	let playing = false;
 
-	$: if (wavesurfer && audioSrc) {
+	$: if (wavesurfer && audioSrc && peaks.length > 0) {
 		updateWaveSurfer();
 	}
 
@@ -34,28 +34,19 @@
 		wavesurfer.on('finish', () => {
 			playing = false;
 		});
-
-		updateWaveSurfer();
 	}
 
 	function updateWaveSurfer() {
-		if (wavesurfer && audioSrc) {
-			if (peaks.length > 0) {
-				wavesurfer.load(audioSrc, peaks);
-			}
-			resetPlayState();
-		}
+		createWaveSurfer();
+		wavesurfer.empty(); // This clears the waveform
+		wavesurfer.load(audioSrc, peaks);
+		resetPlayState();
 	}
 
 	function resetPlayState() {
 		playing = false;
-		if (wavesurfer) {
-			wavesurfer.stop(); // This stops and resets the wavesurfer progress
-			wavesurfer.empty(); // This clears the waveform
-			if (peaks.length > 0) {
-				wavesurfer.load(audioSrc, peaks); // Reload the current audio
-			}
-		}
+		wavesurfer.stop(); // This stops and resets the wavesurfer progress
+		// wavesurfer.empty(); // This clears the waveform
 	}
 
 	function togglePlayPause() {

src/lib/components/SettingsPane.svelte

@@ -91,7 +91,7 @@
 				success = false;
 			}
 		}
-		currSettings = await getSettings();
+		// currSettings = getSettings();
 		updating = false;
 	}
 </script>

src/lib/components/StatusSpinner.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { Loader } from 'lucide-svelte';
+	export let msg;
+	export let size = 15;
+</script>
+
+<div class="flex w-fit items-center justify-center gap-1 p-2">
+	<Loader {size} class="animate-spin" />
+</div>

src/lib/components/UploadPane.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
 	import { AudioLines, Upload } from 'lucide-svelte';
 	import { createEventDispatcher } from 'svelte';
-	import { Button } from 'bits-ui';
+	import { Button, Progress } from 'bits-ui';
+	import StatusSpinner from './StatusSpinner.svelte';
 
 	let draggedFiles: File[] = [];
 	const dispatch = createEventDispatcher();
+	let uploading = false;
 
 	// Function to validate if the file is an audio file
 	function isValidAudioFile(file: File): boolean {
@@ -34,11 +36,18 @@
 		}
 	}
 
+	let nfiles = 0;
+	let currFile;
+
 	// Function to iterate over all files and upload only valid audio files
 	async function uploadFiles(files: File[]) {
+		nfiles = files.length;
 		for (const file of files) {
+			currFile = file.name;
 			if (isValidAudioFile(file)) {
+				uploading = true;
 				await uploadFile(file); // Upload only if the file is valid
+				uploading = false;
 			} else {
 				console.error(`Invalid file type: ${file.name} (${file.type})`);
 			}
@@ -71,7 +80,11 @@
 	>
 		<div class="flex flex-col items-center justify-center">
 			<div>Drag and Drop audio</div>
-			<Upload size={40} />
+			{#if uploading}
+				<StatusSpinner msg={'Uploading'} />
+			{:else}
+				<Upload size={40} />
+			{/if}
 		</div>
 	</div>
 

src/routes/+page.server.ts

@@ -3,22 +3,22 @@ import { json } from '@sveltejs/kit';
 export async function load({ params, fetch, locals }) {
 	const pb = locals.pb;
 	const response = await fetch('/api/records');
-	const records = await response.json();
+	const { records, fileUrls } = await response.json();
 
 	const response2 = await fetch('/api/templates');
 	const templates = await response2.json();
 	console.log('templates ===== ', templates);
 
 	// Use map to create an array of promises
-	const fileUrlPromises = records.map(async (value) => {
-		const record = await pb.collection('scribo').getOne(value.id);
-		const selected_file = pb.getFileUrl(record, record.audio);
+	// const fileUrlPromises = records.map(async (value) => {
+	// 	const record = await pb.collection('scribo').getOne(value.id);
+	// 	const selected_file = pb.getFileUrl(record, record.audio);
 
-		return { selected_file, id: record.id };
-	});
+	// 	return { selected_file, id: record.id };
+	// });
 
-	// Wait for all promises to resolve
-	const fileUrls = await Promise.all(fileUrlPromises);
+	// // Wait for all promises to resolve
+	// const fileUrls = await Promise.all(fileUrlPromises);
 
 	console.log('Home page - fetched', records.length);
 

src/routes/+page.svelte

@@ -10,7 +10,9 @@
 	async function onUpload() {
 		console.log('Files uploaded from page');
 		const response = await fetch('/api/records');
-		records = await response.json();
+		const jres = await response.json();
+		records = jres.records;
+		fileUrls = jres.fileUrls;
 	}
 	async function refreshTemplates() {
 		const response = await fetch('/api/templates');
@@ -23,7 +25,7 @@
 		<div class="flex items-center justify-between gap-2"></div>
 		{#if records}
 			<FilePanel
-				data={records}
+				bind:data={records}
 				{fileUrls}
 				{templates}
 				on:onUpload={onUpload}

src/routes/api/records/+server.ts

@@ -9,7 +9,15 @@ export const GET: RequestHandler = async ({ request, locals }) => {
 
 	try {
 		const records = await pb.collection('scribo').getFullList();
-		return new Response(JSON.stringify(records), {
+
+		const fileUrlPromises = records.map(async (value) => {
+			const record = await pb.collection('scribo').getOne(value.id);
+			const selected_file = pb.getFileUrl(record, record.audio);
+
+			return { selected_file, id: record.id };
+		});
+		const fileUrls = await Promise.all(fileUrlPromises);
+		return new Response(JSON.stringify({ records, fileUrls }), {
 			status: 200,
 			headers: { 'Content-Type': 'application/json' }
 		});