refac: knowledge collection uploading indicator

src/lib/components/common/FileItem.svelte

@@ -4,6 +4,7 @@
 
 	import FileItemModal from './FileItemModal.svelte';
 	import GarbageBin from '../icons/GarbageBin.svelte';
+	import Spinner from './Spinner.svelte';
 
 	const i18n = getContext('i18n');
 	const dispatch = createEventDispatcher();
@@ -13,7 +14,7 @@
 	export let url: string | null = null;
 
 	export let dismissible = false;
-	export let status = 'processed';
+	export let loading = false;
 
 	export let item = null;
 	export let edit = false;
@@ -49,7 +50,7 @@
 	}}
 >
 	<div class="p-3 bg-black/20 dark:bg-white/10 text-white rounded-xl">
-		{#if status === 'processed'}
+		{#if !loading}
 			<svg
 				xmlns="http://www.w3.org/2000/svg"
 				viewBox="0 0 24 24"
@@ -66,42 +67,7 @@
 				/>
 			</svg>
 		{:else}
-			<svg
-				class=" size-5 translate-y-[0.5px]"
-				fill="currentColor"
-				viewBox="0 0 24 24"
-				xmlns="http://www.w3.org/2000/svg"
-				><style>
-					.spinner_qM83 {
-						animation: spinner_8HQG 1.05s infinite;
-					}
-					.spinner_oXPr {
-						animation-delay: 0.1s;
-					}
-					.spinner_ZTLf {
-						animation-delay: 0.2s;
-					}
-					@keyframes spinner_8HQG {
-						0%,
-						57.14% {
-							animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
-							transform: translate(0);
-						}
-						28.57% {
-							animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.33);
-							transform: translateY(-6px);
-						}
-						100% {
-							transform: translate(0);
-						}
-					}
-				</style><circle class="spinner_qM83" cx="4" cy="12" r="2.5" /><circle
-					class="spinner_qM83 spinner_oXPr"
-					cx="12"
-					cy="12"
-					r="2.5"
-				/><circle class="spinner_qM83 spinner_ZTLf" cx="20" cy="12" r="2.5" /></svg
-			>
+			<Spinner />
 		{/if}
 	</div>