feat: use a spinner (#874)

Author: baseplate-admin

src/frontend/src/lib/components/FileViewerOverlay.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { Button } from '$lib/components/ui/button';
+	import { Spinner } from '$lib/components/ui/spinner';
 	import { Download, Link, Check, ArrowLeft, Copy } from '@lucide/svelte';
 	import { fade } from 'svelte/transition';
 	import CodeViewer from '$lib/components/CodeViewer.svelte';
@@ -340,7 +341,10 @@
 						{#if isHeic}
 							{#if heicConverting && !heicConvertedUrl}
 								<div class="flex h-full items-center justify-center text-xs text-white/60">
-									Converting HEIC to PNG...
+									<div class="flex items-center gap-2">
+										<Spinner class="size-4" />
+										<span>Converting HEIC to PNG...</span>
+									</div>
 								</div>
 							{:else if heicConvertedUrl}
 								<div class="flex h-full items-center justify-center">

src/frontend/src/lib/components/ui/spinner/index.ts

@@ -0,0 +1 @@
+export { default as Spinner } from './spinner.svelte';

src/frontend/src/lib/components/ui/spinner/spinner.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { cn } from '$lib/utils.js';
+	import Loader2Icon from '@lucide/svelte/icons/loader-2';
+	import type { SVGAttributes } from 'svelte/elements';
+
+	let {
+		class: className,
+		role = 'status',
+		// we add name, color, and stroke for compatibility with different icon libraries props
+		name,
+		color,
+		stroke,
+		'aria-label': ariaLabel = 'Loading',
+		...restProps
+	}: SVGAttributes<SVGSVGElement> = $props();
+</script>
+
+<Loader2Icon
+	{role}
+	name={name === null ? undefined : name}
+	color={color === null ? undefined : color}
+	stroke={stroke === null ? undefined : stroke}
+	aria-label={ariaLabel}
+	class={cn('size-4 animate-spin', className)}
+	{...restProps}
+/>