button-loading.svelte RawHistoryFolder

1<script lang="ts">
2	import { onDestroy } from 'svelte';
3
4	// Props with defaults:
5	// - text: button label when not loading (default "Envoyer")
6	// - loading: indicates if the button should show a spinner (default false)
7	// - spinnerChar: the character to use for the spinner animation (default '.')
8	let {
9		onclick,
10		disabled = $bindable(false),
11		text = 'Envoyer',
12		loading = $bindable(false),
13		spinnerChar = $bindable('.')
14	} = $props();
15
16	// Using $state for internal reactive variables.
17	let animatedDots = $state(''); // will hold the animated spinner text
18	let count = $state(1);
19	let isDecreasing = $state(true);
20	let intervalID = $state<number | null>(null);
21
22	// Effect that starts/stops the spinner based on loading state.
23	$effect(() => {
24		if (loading) {
25			console.debug('LoadingButton: Spinner started');
26			// Immediately update spinner text to show 3 dots and start decreasing
27			animatedDots = spinnerChar.repeat(3);
28			count = 3;
29			isDecreasing = true;
30
31			if (!intervalID) {
32				intervalID = window.setInterval(() => {
33					// Ping-pong logic: 3,2,1,2,3...
34					count = count + (isDecreasing ? -1 : 1);
35					if (count <= 1) {
36						count = 1;
37						isDecreasing = false;
38					} else if (count >= 3) {
39						count = 3;
40						isDecreasing = true;
41					}
42					animatedDots = spinnerChar.repeat(count);
43					console.debug('LoadingButton: Animated dots updated to', animatedDots);
44				}, 500);
45			}
46		} else {
47			console.debug('LoadingButton: Spinner stopped');
48			if (intervalID) {
49				clearInterval(intervalID);
50				intervalID = null;
51			}
52			// When not loading, display the default text.
53			animatedDots = text;
54		}
55	});
56
57	onDestroy(() => {
58		if (intervalID) {
59			console.debug('LoadingButton: onDestroy clearing interval');
60			clearInterval(intervalID);
61		}
62	});
63</script>
64
65<button {onclick} {disabled}>
66	{#if loading}
67		<span>{animatedDots}</span>
68	{:else}
69		<span>{text}</span>
70	{/if}
71</button>
72
73<style>
74	button {
75		padding: 0.5rem 1rem;
76		font-size: 1rem;
77		cursor: pointer;
78	}
79	button:disabled {
80		cursor: not-allowed;
81		opacity: 0.5;
82		filter: grayscale(50%);
83	}
84</style>