RouteProgress

<script lang="ts">
	import RouteProgress from '@tcpsystems/ui/foundation/RouteProgress';
	import Button from '@tcpsystems/ui/foundation/Button';
	import Stack from '@tcpsystems/ui/foundation/Stack';
	let active = $state(false);
</script>

<RouteProgress {active} label="Loading deployments" />
<Stack>
	<p>{active ? 'Loading deployments…' : 'Deployments are up to date.'}</p>
	<Button onclick={() => active = !active}>{active ? 'Finish navigation' : 'Load deployments'}</Button>
</Stack>

<script lang="ts">
	import RouteProgress from '@tcpsystems/ui/foundation/RouteProgress';
	import Button from '@tcpsystems/ui/foundation/Button';
	import Stack from '@tcpsystems/ui/foundation/Stack';
	let active = $state(true);
</script>

<RouteProgress {active} />
<Stack>
	<p>{active ? 'Opening invoice INV-2048…' : 'Invoice INV-2048 is ready.'}</p>
	<Button onclick={() => active = !active}>{active ? 'Complete request' : 'Open invoice again'}</Button>
</Stack>