<script lang="ts">
  import { onDestroy, onMount } from 'svelte';

  interface Props {
    max?: number | undefined;
    perMs?: number;
    start?: string;
  }

  let { max = undefined, perMs = 1000, start = '' }: Props = $props();

  let dots = $state(start);
  let interval: NodeJS.Timeout;

  onMount(() => {
    interval = setInterval(() => {
      dots += '.';

      if (max && dots.length > max) dots = '';
    }, perMs);
  });

  onDestroy(() => clearInterval(interval));
</script>

{dots}
