Merge pull request #79 from EETagent/debounce

(frontend) debounce

frontend/package.json

@@ -39,6 +39,7 @@
 		"filedrop-svelte": "^0.1.2",
 		"fuse.js": "^6.6.2",
 		"isomorphic-dompurify": "^0.24.0",
+		"just-debounce-it": "^3.1.1",
 		"svelte-forms-lib": "^2.0.1",
 		"swiper": "^8.4.5",
 		"yup": "^0.32.11"

frontend/pnpm-lock.yaml

@@ -13,6 +13,7 @@ specifiers:
   filedrop-svelte: ^0.1.2
   fuse.js: ^6.6.2
   isomorphic-dompurify: ^0.24.0
+  just-debounce-it: ^3.1.1
   prettier: ^2.7.1
   prettier-plugin-svelte: ^2.8.1
   prettier-plugin-tailwindcss: ^0.2.0
@@ -33,6 +34,7 @@ dependencies:
   filedrop-svelte: 0.1.2
   fuse.js: 6.6.2
   isomorphic-dompurify: 0.24.0
+  just-debounce-it: 3.1.1
   svelte-forms-lib: 2.0.1
   swiper: 8.4.5
   yup: 0.32.11
@@ -40,7 +42,7 @@ dependencies:
 devDependencies:
   '@playwright/test': 1.25.0
   '@sveltejs/adapter-auto': 1.0.0-next.90
-  '@sveltejs/kit': 1.0.0-next.571_svelte@3.53.1+vite@3.2.4
+  '@sveltejs/kit': 1.0.0-next.572_svelte@3.53.1+vite@3.2.4
   '@typescript-eslint/eslint-plugin': 5.44.0_fnsv2sbzcckq65bwfk7a5xwslu
   '@typescript-eslint/parser': 5.44.0_hsf322ms6xhhd4b5ne6lb74y4a
   eslint: 8.28.0
@@ -188,8 +190,8 @@ packages:
       import-meta-resolve: 2.2.0
     dev: true
 
-  /@sveltejs/kit/1.0.0-next.571_svelte@3.53.1+vite@3.2.4:
+  /@sveltejs/kit/1.0.0-next.572_svelte@3.53.1+vite@3.2.4:
-    resolution: {integrity: sha512-J+J0UXBiAh569l4ZxKm6eIZJS4lbcP8MgF9fU+DbVplCJ8nqo9wUmirUHZkJoBoB0FUlZSgA0R7N471MnUNNBw==}
+    resolution: {integrity: sha512-PiKEr55L/uJyMKvDPdyoa5MlAYQwdgs8HLMbr28YcCBmhw/v6V7gutKOKdqeXc3YwKEFVS3z7TvW6c7eDokJdQ==}
     engines: {node: '>=16.14'}
     hasBin: true
     requiresBuild: true
@@ -202,7 +204,7 @@ packages:
       cookie: 0.5.0
       devalue: 4.2.0
       kleur: 4.1.5
-      magic-string: 0.26.7
+      magic-string: 0.27.0
       mime: 3.0.0
       sade: 1.8.1
       set-cookie-parser: 2.5.1
@@ -1476,6 +1478,10 @@ packages:
     resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
     dev: true
 
+  /just-debounce-it/3.1.1:
+    resolution: {integrity: sha512-oPsuRyWp99LJaQ4KXC3A42tQNqkRTcPy0A8BCkRZ5cPCgsx81upB2KUrmHZvDUNhnCDKe7MshfTuWFQB9iXwDg==}
+    dev: false
+
   /kleur/4.1.5:
     resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
     engines: {node: '>=6'}
@@ -1536,6 +1542,13 @@ packages:
       sourcemap-codec: 1.4.8
     dev: true
 
+  /magic-string/0.27.0:
+    resolution: {integrity: sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==}
+    engines: {node: '>=12'}
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.4.14
+    dev: true
+
   /merge2/1.4.1:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}

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>

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} />