From 5086583ead09299ee729387cea118bf353f54472 Mon Sep 17 00:00:00 2001
From: EETagent <vojta.jungmann@gmail.com>
Date: Mon, 5 Dec 2022 23:38:24 +0100
Subject: [PATCH] feat: debounce buttons

---
 .../lib/components/dashboard/DashboardInfoCard.svelte  | 10 ++++++----
 .../components/dashboard/DashboardUploadCard.svelte    |  3 ++-
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/frontend/src/lib/components/dashboard/DashboardInfoCard.svelte b/frontend/src/lib/components/dashboard/DashboardInfoCard.svelte
index 642200e..5ca048c 100644
--- a/frontend/src/lib/components/dashboard/DashboardInfoCard.svelte
+++ b/frontend/src/lib/components/dashboard/DashboardInfoCard.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import debounce from 'just-debounce-it';
+
 	import { apiDeltePortfolio, apiSubmitPortfolio } from '$lib/@api/candidate';
 	import Circles from '$lib/components/icons/Circles.svelte';
 	import { fetchSubmProgress, type Status } from '$lib/stores/portfolio';
@@ -24,17 +26,17 @@
 	};
 
 	const handleNotificationClick = async () => {
-		if (status === "uploaded") {
+		if (status === 'uploaded') {
 			await submitPortfolio();
-		} else if (status === "submitted") {
+		} else if (status === 'submitted') {
 			await deletePortfolio();
 		}
-	}
+	};
 </script>
 
 <div class="card flex flex-col">
 	<div class="infoBar flex flex-row-reverse">
-		<StatusNotificationBig {loading} {status} on:click={handleNotificationClick} />
+		<StatusNotificationBig {loading} {status} on:click={debounce(handleNotificationClick, 150)} />
 	</div>
 	<div class="relative flex flex-row justify-between">
 		<div>
diff --git a/frontend/src/lib/components/dashboard/DashboardUploadCard.svelte b/frontend/src/lib/components/dashboard/DashboardUploadCard.svelte
index 512379a..bfa5dbe 100644
--- a/frontend/src/lib/components/dashboard/DashboardUploadCard.svelte
+++ b/frontend/src/lib/components/dashboard/DashboardUploadCard.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import FileType from './FileType.svelte';
+	import debounce from 'just-debounce-it';
 	import { filedrop, type FileDropOptions } from 'filedrop-svelte';
 	import { submissionProgress, UploadStatus, type Status } from '$lib/stores/portfolio';
 	import { createEventDispatcher } from 'svelte';
@@ -105,7 +106,7 @@
 			{#if status === 'uploaded'}
 				<button
 					class="mr-3 rounded-xl bg-[#ef8b46] py-0.5 px-2 text-white shadow-md transition-all duration-300 hover:bg-orange-400"
-					on:click={() => dispatch('delete')}>Smazat</button
+					on:click={debounce(() => dispatch('delete'), 150)}>Smazat</button
 				>
 			{/if}
 			<StatusNotificationDot {status} />