feat: debounce buttons

This commit is contained in:
EETagent 2022-12-05 23:38:24 +01:00
parent b9bc1c278a
commit 5086583ead
2 changed files with 8 additions and 5 deletions

View file

@ -1,4 +1,6 @@
<script lang="ts"> <script lang="ts">
import debounce from 'just-debounce-it';
import { apiDeltePortfolio, apiSubmitPortfolio } from '$lib/@api/candidate'; import { apiDeltePortfolio, apiSubmitPortfolio } from '$lib/@api/candidate';
import Circles from '$lib/components/icons/Circles.svelte'; import Circles from '$lib/components/icons/Circles.svelte';
import { fetchSubmProgress, type Status } from '$lib/stores/portfolio'; import { fetchSubmProgress, type Status } from '$lib/stores/portfolio';
@ -24,17 +26,17 @@
}; };
const handleNotificationClick = async () => { const handleNotificationClick = async () => {
if (status === "uploaded") { if (status === 'uploaded') {
await submitPortfolio(); await submitPortfolio();
} else if (status === "submitted") { } else if (status === 'submitted') {
await deletePortfolio(); await deletePortfolio();
} }
} };
</script> </script>
<div class="card flex flex-col"> <div class="card flex flex-col">
<div class="infoBar flex flex-row-reverse"> <div class="infoBar flex flex-row-reverse">
<StatusNotificationBig {loading} {status} on:click={handleNotificationClick} /> <StatusNotificationBig {loading} {status} on:click={debounce(handleNotificationClick, 150)} />
</div> </div>
<div class="relative flex flex-row justify-between"> <div class="relative flex flex-row justify-between">
<div> <div>

View file

@ -1,5 +1,6 @@
<script lang="ts"> <script lang="ts">
import FileType from './FileType.svelte'; import FileType from './FileType.svelte';
import debounce from 'just-debounce-it';
import { filedrop, type FileDropOptions } from 'filedrop-svelte'; import { filedrop, type FileDropOptions } from 'filedrop-svelte';
import { submissionProgress, UploadStatus, type Status } from '$lib/stores/portfolio'; import { submissionProgress, UploadStatus, type Status } from '$lib/stores/portfolio';
import { createEventDispatcher } from 'svelte'; import { createEventDispatcher } from 'svelte';
@ -105,7 +106,7 @@
{#if status === 'uploaded'} {#if status === 'uploaded'}
<button <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" 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} {/if}
<StatusNotificationDot {status} /> <StatusNotificationDot {status} />