Inline loading text with spinner

<script setup lang="ts">
import { Spinner } from "@/components/ui/spinner"
</script>

<template>
  <div class="mx-auto flex w-full max-w-xs flex-col gap-3">
    <div class="flex items-center gap-2">
      <Spinner class="size-3.5" />
      <span class="text-muted-foreground text-sm">
        Checking availability...
      </span>
    </div>
    <div class="flex items-center gap-2">
      <Spinner class="text-success size-3.5" />
      <span class="text-sm">
        <span class="text-success font-medium">Connected</span>
        <span class="text-muted-foreground"> — syncing data</span>
      </span>
    </div>
    <div class="flex items-center gap-2">
      <Spinner class="text-warning size-3.5" />
      <span class="text-sm">
        <span class="text-warning font-medium">Reconnecting</span>
        <span class="text-muted-foreground"> — attempt 3 of 5</span>
      </span>
    </div>
  </div>
</template>