summaryrefslogtreecommitdiffhomepage
path: root/packages/frontend/src/lib/components/HotReloadIndicator.svelte
blob: 3e34d3b00acb336734047cc7ae6dd3c83d3f39d1 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<script lang="ts">
	const { active }: { active: boolean } = $props();

	let visible = $state(false);
	let timer: ReturnType<typeof setTimeout> | null = null;

	$effect(() => {
		if (active) {
			visible = true;
			if (timer !== null) clearTimeout(timer);
			timer = setTimeout(() => {
				visible = false;
				timer = null;
			}, 2000);
		}
		return () => {
			if (timer !== null) {
				clearTimeout(timer);
				timer = null;
			}
			visible = false;
		};
	});
</script>

{#if visible}
	<div
		class="flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-info/20 text-info text-xs font-medium animate-pulse"
		role="status"
		aria-live="polite"
	>
		<span class="status status-xs status-info"></span>
		<span>Config reloaded</span>
	</div>
{/if}