30ea1f0dcf
Hoists the $navigating store into a shared __mocks__ module so tests can drive it through real transitions. Adds two specs covering (a) skeleton visible while $navigating && topDocs empty and (b) skeleton hidden when topDocs is non-empty. Also sets aria-busy="true" on the skeleton so screen readers announce the loading state (Leonie's a11y suggestion). Addresses Sara's and Felix's review concern that the skeleton branch was dead code in the test world. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
42 lines
1.2 KiB
Svelte
42 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
import { navigating } from '$app/stores';
|
|
import DashboardNeedsMetadata from './DashboardNeedsMetadata.svelte';
|
|
import UploadSuccessBanner from './UploadSuccessBanner.svelte';
|
|
|
|
type IncompleteDoc = {
|
|
id: string;
|
|
title: string;
|
|
uploadedAt: string;
|
|
};
|
|
|
|
interface Props {
|
|
topDocs: IncompleteDoc[];
|
|
totalCount: number;
|
|
bannerCount: number;
|
|
onBannerClose: () => void;
|
|
}
|
|
|
|
let { topDocs, totalCount, bannerCount, onBannerClose }: Props = $props();
|
|
|
|
const showSkeleton = $derived(!!$navigating && topDocs.length === 0);
|
|
const showBlock = $derived(topDocs.length > 0 || bannerCount > 0 || showSkeleton);
|
|
</script>
|
|
|
|
{#if showBlock}
|
|
<div data-testid="enrichment-block" class="flex flex-col gap-3">
|
|
{#if bannerCount > 0}
|
|
<UploadSuccessBanner count={bannerCount} onClose={onBannerClose} />
|
|
{/if}
|
|
{#if topDocs.length > 0}
|
|
<DashboardNeedsMetadata topDocs={topDocs} totalCount={totalCount} />
|
|
{:else if showSkeleton}
|
|
<div
|
|
data-testid="enrichment-block-skeleton"
|
|
class="h-[360px] animate-pulse rounded-sm border border-line bg-surface/50 motion-reduce:animate-none"
|
|
aria-busy="true"
|
|
aria-label="Lade aktualisierte Liste"
|
|
></div>
|
|
{/if}
|
|
</div>
|
|
{/if}
|