includio-cms 0.5.3 → 0.5.7

package/dist/admin/components/layout/nav-forms.svelte

@@ -6,29 +6,31 @@
 	import { getRemotes } from '../../../sveltekit/index.js';
 	import { sidebarLang } from './lang.js';
 	import ClipboardIcon from '@tabler/icons-svelte/icons/clipboard-list';
+	import { getIcon } from '../icons/icon-map.js';
 	import { page } from '$app/state';
 
 	const interfaceLanguage = useInterfaceLanguage();
 	const remotes = getRemotes();
 
 	function isActive(url: string) {
-		return page.url.pathname.startsWith(url);
+		const pathname = page.url.pathname;
+		return pathname === url || pathname.startsWith(url + '/');
 	}
 
-	async function loadForms() {
-		const [forms, overview] = await Promise.all([
-			remotes.getForms(),
-			remotes.getSubmissionsOverview().catch(() => [] as any[])
-		]);
-		const countMap = new Map((overview as any[]).map((o: any) => [o.slug, o.total as number]));
-		return forms.map((f: any) => ({
-			...f,
-			submissionCount: countMap.get(f.slug) ?? 0
-		}));
-	}
+	const formsQuery = $derived(remotes.getForms());
+	const overviewQuery = $derived(remotes.getSubmissionsOverview());
+
+	const countsMap = $derived.by(() => {
+		const map = new Map<string, number>();
+		if (!overviewQuery.ready || !overviewQuery.current) return map;
+		for (const item of overviewQuery.current) {
+			if (item.total > 0) map.set(item.slug, item.total);
+		}
+		return map;
+	});
 </script>
 
-{#await loadForms()}
+{#if !formsQuery.ready}
 	<Sidebar.Group class="border-sidebar-border mt-1 border-t px-0 pt-2 pb-1">
 		<Sidebar.GroupLabel>{sidebarLang[interfaceLanguage.current].forms.title}</Sidebar.GroupLabel>
 		<Sidebar.Menu>
@@ -38,40 +40,38 @@
 			</div>
 		</Sidebar.Menu>
 	</Sidebar.Group>
-{:then items}
-	{#if items.length > 0}
-		<Sidebar.Group class="border-sidebar-border mt-1 border-t px-0 pt-2 pb-1">
-			<Sidebar.GroupLabel class="group-data-[collapsible=icon]:hidden"
-				>{sidebarLang[interfaceLanguage.current].forms.title}</Sidebar.GroupLabel
-			>
-			<Sidebar.Menu>
-				{#each items as item (item.slug)}
-					{@const name = getLocalizedLabel(item.label, interfaceLanguage.current) ?? item.slug}
-					{@const url = `/admin/forms/${item.slug}`}
-					{@const active = isActive(url)}
-					<Sidebar.MenuItem>
-						<Sidebar.MenuButton isActive={active} tooltipContent={name}>
-							{#snippet child({ props })}
-								<a {...props} href={url}>
-									<ClipboardIcon
-										class="size-5!  shrink-0 {active ? 'text-primary' : 'text-muted-foreground'}"
-									/>
-									<span class="flex-1 {active ? 'text-primary' : 'text-muted-foreground'} truncate"
-										>{name}</span
+{:else if formsQuery.current && formsQuery.current.length > 0}
+	<Sidebar.Group class="border-sidebar-border mt-1 border-t px-0 pt-2 pb-1">
+		<Sidebar.GroupLabel class="group-data-[collapsible=icon]:hidden"
+			>{sidebarLang[interfaceLanguage.current].forms.title}</Sidebar.GroupLabel
+		>
+		<Sidebar.Menu>
+			{#each formsQuery.current as item (item.slug)}
+				{@const name = getLocalizedLabel(item.label, interfaceLanguage.current) ?? item.slug}
+				{@const url = `/admin/forms/${item.slug}`}
+				{@const active = isActive(url)}
+				<Sidebar.MenuItem>
+					<Sidebar.MenuButton isActive={active} tooltipContent={name}>
+						{#snippet child({ props })}
+							{@const ResolvedIcon = getIcon(item.sidebarIcon) ?? ClipboardIcon}
+							<a {...props} href={url}>
+								<ResolvedIcon
+									class="size-5! shrink-0 {active ? 'text-primary' : 'text-muted-foreground'}"
+								/>
+								<span class="flex-1 {active ? 'text-primary' : 'text-muted-foreground'} truncate"
+									>{name}</span
+								>
+								{#if countsMap.get(item.slug)}
+									<span
+										class="bg-lavender-lighter text-primary inline-flex h-[18px] min-w-[18px] shrink-0 items-center justify-center rounded-full px-[5px] text-[10px] font-bold group-data-[collapsible=icon]:hidden"
+										>{countsMap.get(item.slug)}</span
 									>
-									{#if item.submissionCount > 0}
-										<span
-											class="bg-lavender-lighter text-primary inline-flex h-[18px] min-w-[18px] shrink-0 items-center justify-center rounded-full px-[5px] text-[10px] font-bold group-data-[collapsible=icon]:hidden"
-										>
-											{item.submissionCount}
-										</span>
-									{/if}
-								</a>
-							{/snippet}
-						</Sidebar.MenuButton>
-					</Sidebar.MenuItem>
-				{/each}
-			</Sidebar.Menu>
-		</Sidebar.Group>
-	{/if}
-{/await}
+								{/if}
+							</a>
+						{/snippet}
+					</Sidebar.MenuButton>
+				</Sidebar.MenuItem>
+			{/each}
+		</Sidebar.Menu>
+	</Sidebar.Group>
+{/if}

package/dist/admin/components/layout/nav-forms.svelte.d.ts

@@ -1,18 +1,3 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const NavForms: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type NavForms = InstanceType<typeof NavForms>;
+declare const NavForms: import("svelte").Component<Record<string, never>, {}, "">;
+type NavForms = ReturnType<typeof NavForms>;
 export default NavForms;

package/dist/admin/components/layout/nav-search.svelte

@@ -5,6 +5,7 @@
 	import ClipboardIcon from '@tabler/icons-svelte/icons/clipboard-list';
 	import SettingsIcon from '@tabler/icons-svelte/icons/settings';
 	import FolderIcon from '@tabler/icons-svelte/icons/folder';
+	import { getIcon } from '../icons/icon-map.js';
 	import * as Command from '../../../components/ui/command/index.js';
 	import { goto } from '$app/navigation';
 	import { getRemotes } from '../../../sveltekit/index.js';
@@ -29,20 +30,17 @@
 		goto(url);
 	}
 
-	async function getData() {
-		const [singles, collections, forms] = await Promise.all([
-			remotes.getSingles(),
-			remotes.getCollections(),
-			remotes.getForms()
-		]);
-
-		return { singles, collections, forms };
-	}
+	const singlesQuery = $derived(remotes.getSingles());
+	const collectionsQuery = $derived(remotes.getCollections());
+	const formsQuery = $derived(remotes.getForms());
 </script>
 
 <svelte:window {onkeydown} />
 
-{#await getData() then { singles, collections, forms }}
+{#if singlesQuery.ready && collectionsQuery.ready && formsQuery.ready}
+	{@const singles = singlesQuery.current ?? []}
+	{@const collections = collectionsQuery.current ?? []}
+	{@const forms = formsQuery.current ?? []}
 	<button
 		onclick={() => (open = true)}
 		class="bg-muted text-text-light hover:border-sidebar-border hover:bg-lavender-lighter hover:text-muted-foreground focus-visible:outline-primary mx-2 mt-2 mb-1 flex min-h-9 cursor-pointer items-center gap-2 rounded-[8px] border border-transparent px-2.5 py-[7px] font-sans text-[13px] transition-all group-data-[collapsible=icon]:mx-1 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:p-[7px] focus-visible:outline-2 focus-visible:outline-offset-2"
@@ -75,11 +73,8 @@
 				{#each singles as item (item.slug)}
 					{@const name = getLocalizedLabel(item.label, interfaceLanguage.current) ?? item.slug}
 					<Command.Item onSelect={() => navigate(`/admin/entries/${item.slug}`)}>
-						{#if item.sidebarIcon}
-							<item.sidebarIcon class="mr-2 size-4" />
-						{:else}
-							<SettingsIcon class="mr-2 size-4" />
-						{/if}
+						{@const ResolvedIcon = getIcon(item.sidebarIcon) ?? SettingsIcon}
+						<ResolvedIcon class="mr-2 size-4" />
 						{name}
 					</Command.Item>
 				{/each}
@@ -91,11 +86,8 @@
 						{@const name =
 							getLocalizedLabel(item.labels?.plural, interfaceLanguage.current) ?? item.slug}
 						<Command.Item onSelect={() => navigate(`/admin/collections/${item.slug}`)}>
-							{#if item.sidebarIcon}
-								<item.sidebarIcon class="mr-2 size-4" />
-							{:else}
-								<FolderIcon class="mr-2 size-4" />
-							{/if}
+							{@const ResolvedIcon = getIcon(item.sidebarIcon) ?? FolderIcon}
+							<ResolvedIcon class="mr-2 size-4" />
 							{name}
 						</Command.Item>
 					{/each}
@@ -107,7 +99,8 @@
 					{#each forms as item (item.slug)}
 						{@const name = getLocalizedLabel(item.label, interfaceLanguage.current) ?? item.slug}
 						<Command.Item onSelect={() => navigate(`/admin/forms/${item.slug}`)}>
-							<ClipboardIcon class="mr-2 size-4" />
+							{@const ResolvedIcon = getIcon(item.sidebarIcon) ?? ClipboardIcon}
+							<ResolvedIcon class="mr-2 size-4" />
 							{name}
 						</Command.Item>
 					{/each}
@@ -115,4 +108,4 @@
 			{/if}
 		</Command.List>
 	</Command.Dialog>
-{/await}
+{/if}

package/dist/admin/components/layout/nav-singletons.svelte

@@ -7,16 +7,20 @@
 	import Skeleton from '../../../components/ui/skeleton/skeleton.svelte';
 	import { page } from '$app/state';
 	import SettingsIcon from '@tabler/icons-svelte/icons/settings';
+	import { getIcon } from '../icons/icon-map.js';
 
 	const interfaceLanguage = useInterfaceLanguage();
 	const remotes = getRemotes();
 
 	function isActive(url: string) {
-		return page.url.pathname.startsWith(url);
+		const pathname = page.url.pathname;
+		return pathname === url || pathname.startsWith(url + '/');
 	}
+
+	const query = $derived(remotes.getSingles());
 </script>
 
-{#await remotes.getSingles()}
+{#if !query.ready}
 	<Sidebar.Group class="border-sidebar-border mt-1 border-t px-0 pt-2 pb-1">
 		<Sidebar.GroupLabel
 			>{sidebarLang[interfaceLanguage.current].singletons.title}</Sidebar.GroupLabel
@@ -28,39 +32,32 @@
 			</div>
 		</Sidebar.Menu>
 	</Sidebar.Group>
-{:then items}
-	{#if items.length > 0}
-		<Sidebar.Group class="border-sidebar-border mt-1 border-t px-0 pt-2 pb-1">
-			<Sidebar.GroupLabel class="group-data-[collapsible=icon]:hidden"
-				>{sidebarLang[interfaceLanguage.current].singletons.title}</Sidebar.GroupLabel
-			>
-			<Sidebar.Menu>
-				{#each items as item (item)}
-					{@const name = getLocalizedLabel(item.label, interfaceLanguage.current) ?? item.slug}
-					{@const url = `/admin/entries/${item.slug}`}
-					{@const active = isActive(url)}
-					<Sidebar.MenuItem>
-						<Sidebar.MenuButton isActive={active} tooltipContent={name}>
-							{#snippet child({ props })}
-								<a {...props} href={url}>
-									{#if item.sidebarIcon}
-										<item.sidebarIcon
-											class="size-5! shrink-0 {active ? 'text-primary' : 'text-muted-foreground'}"
-										/>
-									{:else}
-										<SettingsIcon
-											class="size-5! shrink-0 {active ? 'text-primary' : 'text-muted-foreground'}"
-										/>
-									{/if}
-									<span class="flex-1 truncate {active ? 'text-primary' : 'text-muted-foreground'}"
-										>{name}</span
-									>
-								</a>
-							{/snippet}
-						</Sidebar.MenuButton>
-					</Sidebar.MenuItem>
-				{/each}
-			</Sidebar.Menu>
-		</Sidebar.Group>
-	{/if}
-{/await}
+{:else if query.current && query.current.length > 0}
+	<Sidebar.Group class="border-sidebar-border mt-1 border-t px-0 pt-2 pb-1">
+		<Sidebar.GroupLabel class="group-data-[collapsible=icon]:hidden"
+			>{sidebarLang[interfaceLanguage.current].singletons.title}</Sidebar.GroupLabel
+		>
+		<Sidebar.Menu>
+			{#each query.current as item (item)}
+				{@const name = getLocalizedLabel(item.label, interfaceLanguage.current) ?? item.slug}
+				{@const url = `/admin/entries/${item.slug}`}
+				{@const active = isActive(url)}
+				<Sidebar.MenuItem>
+					<Sidebar.MenuButton isActive={active} tooltipContent={name}>
+						{#snippet child({ props })}
+							{@const ResolvedIcon = getIcon(item.sidebarIcon) ?? SettingsIcon}
+							<a {...props} href={url}>
+								<ResolvedIcon
+									class="size-5! shrink-0 {active ? 'text-primary' : 'text-muted-foreground'}"
+								/>
+								<span class="flex-1 truncate {active ? 'text-primary' : 'text-muted-foreground'}"
+									>{name}</span
+								>
+							</a>
+						{/snippet}
+					</Sidebar.MenuButton>
+				</Sidebar.MenuItem>
+			{/each}
+		</Sidebar.Menu>
+	</Sidebar.Group>
+{/if}

package/dist/admin/components/layout/nav-singletons.svelte.d.ts

@@ -1,18 +1,3 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const NavSingletons: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type NavSingletons = InstanceType<typeof NavSingletons>;
+declare const NavSingletons: import("svelte").Component<Record<string, never>, {}, "">;
+type NavSingletons = ReturnType<typeof NavSingletons>;
 export default NavSingletons;

package/dist/admin/components/media/file/file-preview.svelte

@@ -38,111 +38,112 @@
 		}
 		saving = false;
 	}
+
+	const query = $derived(remotes.getFileById(fileId));
 </script>
 
-{#await remotes.getFileById(fileId) then file}
-	{#if file}
-		<div class="group flex items-center gap-3 rounded-xl border bg-card p-2 shadow-sm transition-all hover:-translate-y-0.5 hover:shadow-md">
-			<!-- Miniaturka z lightbox -->
-			<button
-				type="button"
-				class="aspect-square w-14 shrink-0 overflow-hidden rounded-lg cursor-pointer hover:ring-2 hover:ring-primary/50 transition-all"
-				onclick={() => file.type === 'image' && (lightboxOpen = true)}
-			>
-				<FileMiniature {file} />
-			</button>
+{#if query.ready && query.current}
+	{@const file = query.current}
+	<div class="group flex items-center gap-3 rounded-xl border bg-card p-2 shadow-sm transition-all hover:-translate-y-0.5 hover:shadow-md">
+		<!-- Miniaturka z lightbox -->
+		<button
+			type="button"
+			class="aspect-square w-14 shrink-0 overflow-hidden rounded-lg cursor-pointer hover:ring-2 hover:ring-primary/50 transition-all"
+			onclick={() => file.type === 'image' && (lightboxOpen = true)}
+		>
+			<FileMiniature {file} />
+		</button>
+
+		<div class="min-w-0 flex-1">
+			<div class="flex items-center gap-1">
+				<p class="truncate text-sm font-medium flex-1">{file.name}</p>
+				<Button
+					variant="ghost"
+					size="icon"
+					class="h-6 w-6 shrink-0"
+					onclick={() => {
+						altValue = file.alt || '';
+						altDialogOpen = true;
+					}}
+				>
+					<Pencil class="h-3 w-3" />
+				</Button>
+			</div>
+			{#if file.size}
+				<p class="text-xs text-muted-foreground">{(file.size / 1024).toFixed(1)} KB</p>
+			{/if}
+			{#if file.alt}
+				<p class="text-xs text-muted-foreground truncate" title={file.alt}>{file.alt}</p>
+			{/if}
+		</div>
 
-			<div class="min-w-0 flex-1">
-				<div class="flex items-center gap-1">
-					<p class="truncate text-sm font-medium flex-1">{file.name}</p>
-					<Button
-						variant="ghost"
-						size="icon"
-						class="h-6 w-6 shrink-0"
-						onclick={() => {
-							altValue = file.alt || '';
-							altDialogOpen = true;
-						}}
-					>
-						<Pencil class="h-3 w-3" />
-					</Button>
+		{#if index !== undefined && onDelete}
+			<div class="flex shrink-0 items-center gap-1">
+				<div use:draggable={{ container: index.toString(), dragData: file }} class="cursor-grab p-1 text-muted-foreground hover:text-foreground">
+					<GripVertical class="h-4 w-4" />
 				</div>
-				{#if file.size}
-					<p class="text-xs text-muted-foreground">{(file.size / 1024).toFixed(1)} KB</p>
-				{/if}
-				{#if file.alt}
-					<p class="text-xs text-muted-foreground truncate" title={file.alt}>{file.alt}</p>
-				{/if}
+				<Button variant="ghost" size="icon" class="h-7 w-7 text-muted-foreground hover:text-destructive" onclick={() => onDelete(index)}>
+					<X class="h-4 w-4" />
+				</Button>
 			</div>
+		{/if}
+	</div>
 
-			{#if index !== undefined && onDelete}
-				<div class="flex shrink-0 items-center gap-1">
-					<div use:draggable={{ container: index.toString(), dragData: file }} class="cursor-grab p-1 text-muted-foreground hover:text-foreground">
-						<GripVertical class="h-4 w-4" />
-					</div>
-					<Button variant="ghost" size="icon" class="h-7 w-7 text-muted-foreground hover:text-destructive" onclick={() => onDelete(index)}>
-						<X class="h-4 w-4" />
-					</Button>
+	<!-- Lightbox dialog -->
+	{#if file.type === 'image'}
+		<Dialog.Root bind:open={lightboxOpen}>
+			<Dialog.Content class="max-w-[90vw] max-h-[90vh] p-2 bg-black/95 border-none">
+				<div class="checkered-lightbox flex items-center justify-center">
+					<img
+						src={file.url}
+						alt={file.alt || file.name}
+						class="max-w-full max-h-[85vh] object-contain"
+					/>
 				</div>
-			{/if}
-		</div>
+			</Dialog.Content>
+		</Dialog.Root>
+	{/if}
 
-		<!-- Lightbox dialog -->
-		{#if file.type === 'image'}
-			<Dialog.Root bind:open={lightboxOpen}>
-				<Dialog.Content class="max-w-[90vw] max-h-[90vh] p-2 bg-black/95 border-none">
-					<div class="checkered-lightbox flex items-center justify-center">
+	<!-- Alt text edit dialog -->
+	<Dialog.Root bind:open={altDialogOpen}>
+		<Dialog.Content class="max-w-lg">
+			<Dialog.Header>
+				<Dialog.Title>Edytuj tekst alternatywny</Dialog.Title>
+			</Dialog.Header>
+			<div class="space-y-4 py-4">
+				{#if file.type === 'image'}
+					<div class="checkered-lightbox rounded-lg overflow-hidden">
 						<img
 							src={file.url}
 							alt={file.alt || file.name}
-							class="max-w-full max-h-[85vh] object-contain"
-						/>
-					</div>
-				</Dialog.Content>
-			</Dialog.Root>
-		{/if}
-
-		<!-- Alt text edit dialog -->
-		<Dialog.Root bind:open={altDialogOpen}>
-			<Dialog.Content class="max-w-lg">
-				<Dialog.Header>
-					<Dialog.Title>Edytuj tekst alternatywny</Dialog.Title>
-				</Dialog.Header>
-				<div class="space-y-4 py-4">
-					{#if file.type === 'image'}
-						<div class="checkered-lightbox rounded-lg overflow-hidden">
-							<img
-								src={file.url}
-								alt={file.alt || file.name}
-								class="max-h-48 w-full object-contain"
-							/>
-						</div>
-					{/if}
-					<div class="space-y-2">
-						<Label for="alt-text">Tekst alternatywny</Label>
-						<Textarea
-							id="alt-text"
-							bind:value={altValue}
-							placeholder="Opisz zawartość obrazu..."
-							class="min-h-[120px] resize-none"
+							class="max-h-48 w-full object-contain"
 						/>
-						<p class="text-xs text-muted-foreground">
-							Tekst alternatywny opisuje obraz dla osób niewidomych i wyszukiwarek.
-						</p>
 					</div>
+				{/if}
+				<div class="space-y-2">
+					<Label for="alt-text">Tekst alternatywny</Label>
+					<Textarea
+						id="alt-text"
+						bind:value={altValue}
+						placeholder="Opisz zawartość obrazu..."
+						class="min-h-[120px] resize-none"
+					/>
+					<p class="text-xs text-muted-foreground">
+						Tekst alternatywny opisuje obraz dla osób niewidomych i wyszukiwarek.
+					</p>
 				</div>
-				<Dialog.Footer>
-					<Button variant="outline" onclick={() => altDialogOpen = false}>Anuluj</Button>
-					<Button onclick={() => saveAlt(file)} disabled={saving}>
-						{saving ? 'Zapisuję...' : 'Zapisz'}
-					</Button>
-				</Dialog.Footer>
-			</Dialog.Content>
-		</Dialog.Root>
-	{:else}
-		<p class="text-sm text-muted-foreground">Plik nie istnieje.</p>
-	{/if}
-{/await}
+			</div>
+			<Dialog.Footer>
+				<Button variant="outline" onclick={() => altDialogOpen = false}>Anuluj</Button>
+				<Button onclick={() => saveAlt(file)} disabled={saving}>
+					{saving ? 'Zapisuję...' : 'Zapisz'}
+				</Button>
+			</Dialog.Footer>
+		</Dialog.Content>
+	</Dialog.Root>
+{:else if query.ready}
+	<p class="text-sm text-muted-foreground">Plik nie istnieje.</p>
+{/if}
 
 <style>
 	.checkered-lightbox {

package/dist/admin/components/media/file-preview.svelte

@@ -19,25 +19,24 @@
 </script>
 
 <div class="border">
-	{#await fileQuery}
+	{#if !fileQuery.ready}
 		Loading...
-	{:then file}
-		{#if file}
-			{#if file.type === 'image'}
-				<Image data={file} class={className} />
-			{:else if file.type === 'video'}
-				{#if file.thumbnailUrl}
-					<Image data={{ ...file, url: file.thumbnailUrl }} class={className} />
-				{:else}
-					<div class={cn('border-primary flex items-center justify-center border p-4', className)}>
-						<VideoOff />
-					</div>
-				{/if}
+	{:else if fileQuery.current}
+		{@const file = fileQuery.current}
+		{#if file.type === 'image'}
+			<Image data={file} class={className} />
+		{:else if file.type === 'video'}
+			{#if file.thumbnailUrl}
+				<Image data={{ ...file, url: file.thumbnailUrl }} class={className} />
+			{:else}
+				<div class={cn('border-primary flex items-center justify-center border p-4', className)}>
+					<VideoOff />
+				</div>
 			{/if}
-		{:else}
-			<div class={cn('border-primary flex items-center justify-center border p-4', className)}>
-				<PhotoOff />
-			</div>
 		{/if}
-	{/await}
+	{:else}
+		<div class={cn('border-primary flex items-center justify-center border p-4', className)}>
+			<PhotoOff />
+		</div>
+	{/if}
 </div>