fix: loading state on start

apps/ui/src/routes/services/[id]/secrets.svelte

@@ -25,14 +25,47 @@
 	import { page } from '$app/stores';
 	import { get } from '$lib/api';
 	import { t } from '$lib/translations';
+	import pLimit from 'p-limit';
 	import ServiceLinks from './_ServiceLinks.svelte';
+	import { addToast } from '$lib/store';
+	import { saveSecret } from './utils';
+	const limit = pLimit(1);
 
 	const { id } = $page.params;
+	let batchSecrets = '';
 
 	async function refreshSecrets() {
 		const data = await get(`/services/${id}/secrets`);
 		secrets = [...data.secrets];
 	}
+	async function getValues(e: any) {
+		e.preventDefault();
+		const eachValuePair = batchSecrets.split('\n');
+		const batchSecretsPairs = eachValuePair
+			.filter((secret) => !secret.startsWith('#') && secret)
+			.map((secret) => {
+				const [name, ...rest] = secret.split('=');
+				const value = rest.join('=');
+				const cleanValue = value?.replaceAll('"', '') || '';
+				return {
+					name,
+					value: cleanValue,
+					isNew: !secrets.find((secret: any) => name === secret.name)
+				};
+			});
+
+		await Promise.all(
+			batchSecretsPairs.map(({ name, value, isNew }) =>
+				limit(() => saveSecret({ name, value, serviceId: id, isNew }))
+			)
+		);
+		batchSecrets = '';
+		await refreshSecrets();
+		addToast({
+			message: 'Secrets saved.',
+			type: 'success'
+		});
+	}
 </script>
 
 <div
@@ -93,4 +126,9 @@
 			</tr>
 		</tbody>
 	</table>
+	<h2 class="title my-6 font-bold">Paste .env file</h2>
+	<form on:submit|preventDefault={getValues} class="mb-12 w-full">
+		<textarea bind:value={batchSecrets} class="mb-2 min-h-[200px] w-full" />
+		<button class="btn btn-sm bg-applications" type="submit">Batch add secrets</button>
+	</form>
 </div>