feat(bulk-list): add metadata loading states and indicators

Signed-off-by: Robert Goniszewski <[email protected]>

src/lib/components/BulkList/BulkList.svelte

@@ -3,6 +3,7 @@ import { writable } from 'svelte/store';
 import BulkListItem from '../BulkListItem/BulkListItem.svelte';
 
 export let itemList = writable<BulkListItem[]>([]);
+export let isLoading = false;
 
 const isAnyItemSelected = writable(false);
 
@@ -52,14 +53,16 @@ const removeSelectedItems = () => {
 				</tr>
 			</thead>
 			<tbody>
-				{#each $itemList as { id, icon, url, title, category, selected } (id)}
+				{#each $itemList as { id, icon, url, title, category, selected, contentHtml } (id)}
 					<BulkListItem
 						id={id}
 						icon={icon}
 						url={url}
 						title={title}
 						category={category}
 						selected={selected}
+						isLoading={isLoading}
+						metadataFetched={!!contentHtml}
 						toggleItemSelection={toggleItemSelection} />
 				{/each}
 			</tbody>

src/lib/components/BulkListItem/BulkListItem.svelte

@@ -1,12 +1,19 @@
 <script lang="ts">
-import { IconPhotoX } from '@tabler/icons-svelte';
+import {
+	IconCircleDashedCheck,
+	IconExclamationCircle,
+	IconPhotoX,
+	IconStopwatch
+} from '@tabler/icons-svelte';
 
 export let id: number;
 export let selected = false;
 export let icon: string;
 export let url: string;
 export let title: string;
 export let category: string;
+export let isLoading: boolean;
+export let metadataFetched: boolean;
 export let toggleItemSelection: (id: number) => void;
 
 let urlObj = new URL(url);
@@ -41,8 +48,21 @@ let urlObj = new URL(url);
 							: urlObj.hostname}
 					</a>
 				</div>
-				<div class="text-sm tracking-tight opacity-50">
+				<div class="flex items-center gap-1 text-sm tracking-tight text-secondary">
 					{new URL(url).hostname}
+					{#if metadataFetched}
+						<div class="tooltip" data-tip="Metadata fetched">
+							<IconCircleDashedCheck class="h-4 w-4 text-success" />
+						</div>
+					{:else if isLoading}
+						<div class="tooltip" data-tip="Loading metadata">
+							<IconStopwatch class="h-4 w-4 text-warning" />
+						</div>
+					{:else}
+						<div class="tooltip" data-tip="Failed to fetch metadata">
+							<IconExclamationCircle class="h-4 w-4 text-error" />
+						</div>
+					{/if}
 				</div>
 			</div>
 		</div>

src/lib/types/common/BulkList.type.ts

@@ -1,4 +1,6 @@
-export type BulkListItem = {
+import type { Metadata } from '../Metadata.type';
+
+export type BulkListItem = Partial<Metadata> & {
 	id: number;
 	icon: string;
 	url: string;