<script lang="ts">
import AppIcon from "./AppIcon.svelte";
interface Props {
label?: string;
compact?: boolean;
}
let {
label = "Loading",
compact = false,
}: Props = $props();
</script>
<div class="loading-state" class:compact>
<span class="loading-icon" aria-hidden="true">
<AppIcon name="refresh" size={compact ? 12 : 16} />
</span>
</div>
<style>
.loading-state {
display: flex;
align-items: center;
justify-content: center;
gap: var(--wb-spacing-8);
min-height: var(--wb-control-size-72);
color: var(--vscode-disabledForeground);
font-size: var(--wb-font-size-12);
}
.loading-state.compact {
min-height: auto;
gap: var(--wb-spacing-6);
font-size: var(--wb-font-size-11);
}
.loading-icon {
display: inline-flex;
align-items: center;
justify-content: center;
animation: loading-spin 1s linear infinite;
}
@keyframes loading-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>