From b6158a89a6f16ad5f9e6545578f51458419f8e0b Mon Sep 17 00:00:00 2001 From: Till-JS <101404291+Till-JS@users.noreply.github.com> Date: Tue, 9 Dec 2025 19:41:19 +0100 Subject: [PATCH] feat(ui): add comprehensive skeleton loaders for contacts and todo apps MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add shared skeleton primitives to @manacore/shared-ui: - SkeletonAvatar, SkeletonCard, SkeletonRow, SkeletonList, SkeletonGrid - Add contacts app skeletons: - AppLoadingSkeleton for root layout auth loading - ContactListSkeleton, ContactGridSkeleton for contact views - ContactDetailSkeleton for modal loading - ContactNotesSkeleton for notes section - TagGridSkeleton, FavoriteGridSkeleton for respective pages - DuplicateListSkeleton for duplicates page - ImportPreviewSkeleton, GoogleImportSkeleton for import flows - NetworkGraphSkeleton for network visualization - Add todo app skeletons: - AppLoadingSkeleton for root layout - TaskListSkeleton with configurable sections - StatisticsSkeleton for stats page charts - KanbanBoardSkeleton, KanbanColumnSkeleton for kanban view - Replace all spinner loading indicators with skeleton loaders - All skeletons include proper accessibility attributes 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- .../lib/components/ContactDetailModal.svelte | 21 +- .../web/src/lib/components/ContactList.svelte | 13 +- .../src/lib/components/ContactNotes.svelte | 5 +- .../lib/components/import/GoogleImport.svelte | 8 +- .../skeletons/AppLoadingSkeleton.svelte | 117 ++++++++ .../skeletons/ContactCardSkeleton.svelte | 70 +++++ .../skeletons/ContactDetailSkeleton.svelte | 171 ++++++++++++ .../skeletons/ContactGridSkeleton.svelte | 57 ++++ .../skeletons/ContactListSkeleton.svelte | 31 +++ .../skeletons/ContactNotesSkeleton.svelte | 40 +++ .../skeletons/ContactRowSkeleton.svelte | 45 ++++ .../skeletons/DuplicateGroupSkeleton.svelte | 89 +++++++ .../skeletons/DuplicateListSkeleton.svelte | 69 +++++ .../skeletons/FavoriteCardSkeleton.svelte | 62 +++++ .../skeletons/FavoriteGridSkeleton.svelte | 56 ++++ .../skeletons/GoogleImportSkeleton.svelte | 51 ++++ .../skeletons/ImportPreviewSkeleton.svelte | 118 ++++++++ .../skeletons/NetworkGraphSkeleton.svelte | 115 ++++++++ .../skeletons/TagCardSkeleton.svelte | 36 +++ .../skeletons/TagGridSkeleton.svelte | 50 ++++ .../web/src/lib/components/skeletons/index.ts | 42 +++ .../apps/web/src/routes/(app)/+layout.svelte | 12 +- .../web/src/routes/(app)/archive/+page.svelte | 5 +- .../web/src/routes/(app)/data/+page.svelte | 8 +- .../src/routes/(app)/duplicates/+page.svelte | 7 +- .../src/routes/(app)/favorites/+page.svelte | 11 +- .../web/src/routes/(app)/tags/+page.svelte | 5 +- .../apps/web/src/routes/+layout.svelte | 17 +- .../lib/components/kanban/KanbanBoard.svelte | 5 +- .../skeletons/AppLoadingSkeleton.svelte | 130 +++++++++ .../skeletons/KanbanBoardSkeleton.svelte | 70 +++++ .../skeletons/KanbanColumnSkeleton.svelte | 99 +++++++ .../skeletons/StatisticsSkeleton.svelte | 252 ++++++++++++++++++ .../skeletons/TaskItemSkeleton.svelte | 80 ++++++ .../skeletons/TaskListSkeleton.svelte | 73 +++++ .../web/src/lib/components/skeletons/index.ts | 20 ++ .../apps/web/src/routes/(app)/+page.svelte | 7 +- .../src/routes/(app)/statistics/+page.svelte | 31 +-- apps/todo/apps/web/src/routes/+layout.svelte | 10 +- packages/shared-ui/src/index.ts | 10 +- packages/shared-ui/src/molecules/index.ts | 10 +- .../molecules/loaders/SkeletonAvatar.svelte | 24 ++ .../src/molecules/loaders/SkeletonCard.svelte | 69 +++++ .../src/molecules/loaders/SkeletonGrid.svelte | 61 +++++ .../src/molecules/loaders/SkeletonList.svelte | 52 ++++ .../src/molecules/loaders/SkeletonRow.svelte | 60 +++++ .../shared-ui/src/molecules/loaders/index.ts | 20 ++ 47 files changed, 2303 insertions(+), 111 deletions(-) create mode 100644 apps/contacts/apps/web/src/lib/components/skeletons/AppLoadingSkeleton.svelte create mode 100644 apps/contacts/apps/web/src/lib/components/skeletons/ContactCardSkeleton.svelte create mode 100644 apps/contacts/apps/web/src/lib/components/skeletons/ContactDetailSkeleton.svelte create mode 100644 apps/contacts/apps/web/src/lib/components/skeletons/ContactGridSkeleton.svelte create mode 100644 apps/contacts/apps/web/src/lib/components/skeletons/ContactListSkeleton.svelte create mode 100644 apps/contacts/apps/web/src/lib/components/skeletons/ContactNotesSkeleton.svelte create mode 100644 apps/contacts/apps/web/src/lib/components/skeletons/ContactRowSkeleton.svelte create mode 100644 apps/contacts/apps/web/src/lib/components/skeletons/DuplicateGroupSkeleton.svelte create mode 100644 apps/contacts/apps/web/src/lib/components/skeletons/DuplicateListSkeleton.svelte create mode 100644 apps/contacts/apps/web/src/lib/components/skeletons/FavoriteCardSkeleton.svelte create mode 100644 apps/contacts/apps/web/src/lib/components/skeletons/FavoriteGridSkeleton.svelte create mode 100644 apps/contacts/apps/web/src/lib/components/skeletons/GoogleImportSkeleton.svelte create mode 100644 apps/contacts/apps/web/src/lib/components/skeletons/ImportPreviewSkeleton.svelte create mode 100644 apps/contacts/apps/web/src/lib/components/skeletons/NetworkGraphSkeleton.svelte create mode 100644 apps/contacts/apps/web/src/lib/components/skeletons/TagCardSkeleton.svelte create mode 100644 apps/contacts/apps/web/src/lib/components/skeletons/TagGridSkeleton.svelte create mode 100644 apps/contacts/apps/web/src/lib/components/skeletons/index.ts create mode 100644 apps/todo/apps/web/src/lib/components/skeletons/AppLoadingSkeleton.svelte create mode 100644 apps/todo/apps/web/src/lib/components/skeletons/KanbanBoardSkeleton.svelte create mode 100644 apps/todo/apps/web/src/lib/components/skeletons/KanbanColumnSkeleton.svelte create mode 100644 apps/todo/apps/web/src/lib/components/skeletons/StatisticsSkeleton.svelte create mode 100644 apps/todo/apps/web/src/lib/components/skeletons/TaskItemSkeleton.svelte create mode 100644 apps/todo/apps/web/src/lib/components/skeletons/TaskListSkeleton.svelte create mode 100644 apps/todo/apps/web/src/lib/components/skeletons/index.ts create mode 100644 packages/shared-ui/src/molecules/loaders/SkeletonAvatar.svelte create mode 100644 packages/shared-ui/src/molecules/loaders/SkeletonCard.svelte create mode 100644 packages/shared-ui/src/molecules/loaders/SkeletonGrid.svelte create mode 100644 packages/shared-ui/src/molecules/loaders/SkeletonList.svelte create mode 100644 packages/shared-ui/src/molecules/loaders/SkeletonRow.svelte diff --git a/apps/contacts/apps/web/src/lib/components/ContactDetailModal.svelte b/apps/contacts/apps/web/src/lib/components/ContactDetailModal.svelte index f140824e4..004aa5bf6 100644 --- a/apps/contacts/apps/web/src/lib/components/ContactDetailModal.svelte +++ b/apps/contacts/apps/web/src/lib/components/ContactDetailModal.svelte @@ -3,6 +3,7 @@ import { onMount } from 'svelte'; import { contactsApi, photoApi, type Contact } from '$lib/api/contacts'; import ContactNotes from './ContactNotes.svelte'; + import { ContactDetailSkeleton } from '$lib/components/skeletons'; interface Props { contactId: string; @@ -276,25 +277,7 @@
{#if loading} -
- -

Lade Kontakt...

-
+ {:else if error && !contact}
diff --git a/apps/contacts/apps/web/src/lib/components/ContactList.svelte b/apps/contacts/apps/web/src/lib/components/ContactList.svelte index 9997e8200..6bd22cbc7 100644 --- a/apps/contacts/apps/web/src/lib/components/ContactList.svelte +++ b/apps/contacts/apps/web/src/lib/components/ContactList.svelte @@ -13,6 +13,7 @@ import ContactListView from '$lib/components/views/ContactListView.svelte'; import ContactGridView from '$lib/components/views/ContactGridView.svelte'; import ContactAlphabetView from '$lib/components/views/ContactAlphabetView.svelte'; + import { ContactListSkeleton, ContactGridSkeleton } from '$lib/components/skeletons'; import { batchApi } from '$lib/api/batch'; import { toasts } from '$lib/stores/toast'; @@ -453,13 +454,13 @@
- + {#if contactsStore.loading} -
-
-
+ {#if viewModeStore.mode === 'grid'} + + {:else} + + {/if} {:else if contactsStore.contacts.length === 0}
diff --git a/apps/contacts/apps/web/src/lib/components/ContactNotes.svelte b/apps/contacts/apps/web/src/lib/components/ContactNotes.svelte index 744a208f4..a55ffcc2f 100644 --- a/apps/contacts/apps/web/src/lib/components/ContactNotes.svelte +++ b/apps/contacts/apps/web/src/lib/components/ContactNotes.svelte @@ -2,6 +2,7 @@ import { onMount } from 'svelte'; import { _ } from 'svelte-i18n'; import { notesApi, type ContactNote } from '$lib/api/contacts'; + import { ContactNotesSkeleton } from '$lib/components/skeletons'; interface Props { contactId: string; @@ -197,9 +198,7 @@ {#if loading} -
- -
+ {:else if notes.length === 0 && !showAddForm}

{$_('notes.empty')}

diff --git a/apps/contacts/apps/web/src/lib/components/import/GoogleImport.svelte b/apps/contacts/apps/web/src/lib/components/import/GoogleImport.svelte index 258da86fc..1662a51fe 100644 --- a/apps/contacts/apps/web/src/lib/components/import/GoogleImport.svelte +++ b/apps/contacts/apps/web/src/lib/components/import/GoogleImport.svelte @@ -10,6 +10,7 @@ type GoogleImportResult, } from '$lib/api/google'; import { contactsStore } from '$lib/stores/contacts.svelte'; + import { GoogleImportSkeleton } from '$lib/components/skeletons'; type Step = 'connect' | 'select' | 'result'; @@ -170,12 +171,7 @@ {/if} {#if isLoading} -
-
-

{$_('google.loading')}

-
+ {:else if step === 'connect'}
diff --git a/apps/contacts/apps/web/src/lib/components/skeletons/AppLoadingSkeleton.svelte b/apps/contacts/apps/web/src/lib/components/skeletons/AppLoadingSkeleton.svelte new file mode 100644 index 000000000..a0fb33238 --- /dev/null +++ b/apps/contacts/apps/web/src/lib/components/skeletons/AppLoadingSkeleton.svelte @@ -0,0 +1,117 @@ + + +
+ +
+ +
+ + + +
+ +
+ + +
+ +
+ + +
+ + + + + +
+ {#each Array(5) as _, i} +
+ +
+ + +
+
+ {/each} +
+
+
+ + diff --git a/apps/contacts/apps/web/src/lib/components/skeletons/ContactCardSkeleton.svelte b/apps/contacts/apps/web/src/lib/components/skeletons/ContactCardSkeleton.svelte new file mode 100644 index 000000000..2d3430e1c --- /dev/null +++ b/apps/contacts/apps/web/src/lib/components/skeletons/ContactCardSkeleton.svelte @@ -0,0 +1,70 @@ + + +
+ +
+ +
+ + + + + +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ + +
+ + +
+
+ + diff --git a/apps/contacts/apps/web/src/lib/components/skeletons/ContactDetailSkeleton.svelte b/apps/contacts/apps/web/src/lib/components/skeletons/ContactDetailSkeleton.svelte new file mode 100644 index 000000000..96318820b --- /dev/null +++ b/apps/contacts/apps/web/src/lib/components/skeletons/ContactDetailSkeleton.svelte @@ -0,0 +1,171 @@ + + +
+ +
+
+ +
+ + +
+ + +
+ {#each Array(3) as _} +
+ + +
+ {/each} +
+ + +
+ +
+
+ + +
+
+ {#each Array(3) as _, i} +
+
+ + +
+
+ {/each} +
+
+ + +
+
+ + +
+
+ {#each Array(2) as _, i} +
+
+ + +
+
+ {/each} +
+
+ + +
+
+ + +
+
+ + + +
+
+
+
+ + diff --git a/apps/contacts/apps/web/src/lib/components/skeletons/ContactGridSkeleton.svelte b/apps/contacts/apps/web/src/lib/components/skeletons/ContactGridSkeleton.svelte new file mode 100644 index 000000000..362727151 --- /dev/null +++ b/apps/contacts/apps/web/src/lib/components/skeletons/ContactGridSkeleton.svelte @@ -0,0 +1,57 @@ + + +
+ {#each Array(count) as _, i} + + {/each} +
+ + diff --git a/apps/contacts/apps/web/src/lib/components/skeletons/ContactListSkeleton.svelte b/apps/contacts/apps/web/src/lib/components/skeletons/ContactListSkeleton.svelte new file mode 100644 index 000000000..3bb93cb5a --- /dev/null +++ b/apps/contacts/apps/web/src/lib/components/skeletons/ContactListSkeleton.svelte @@ -0,0 +1,31 @@ + + +
+ {#each Array(count) as _, i} + + {/each} +
diff --git a/apps/contacts/apps/web/src/lib/components/skeletons/ContactNotesSkeleton.svelte b/apps/contacts/apps/web/src/lib/components/skeletons/ContactNotesSkeleton.svelte new file mode 100644 index 000000000..6ebee670b --- /dev/null +++ b/apps/contacts/apps/web/src/lib/components/skeletons/ContactNotesSkeleton.svelte @@ -0,0 +1,40 @@ + + +
+ {#each Array(3) as _, i} +
+
+ + +
+ +
+ {/each} +
+ + diff --git a/apps/contacts/apps/web/src/lib/components/skeletons/ContactRowSkeleton.svelte b/apps/contacts/apps/web/src/lib/components/skeletons/ContactRowSkeleton.svelte new file mode 100644 index 000000000..58fb5d938 --- /dev/null +++ b/apps/contacts/apps/web/src/lib/components/skeletons/ContactRowSkeleton.svelte @@ -0,0 +1,45 @@ + + +
+ + + + +
+ + + + + + +
+ + + +
+ + diff --git a/apps/contacts/apps/web/src/lib/components/skeletons/DuplicateGroupSkeleton.svelte b/apps/contacts/apps/web/src/lib/components/skeletons/DuplicateGroupSkeleton.svelte new file mode 100644 index 000000000..bac423136 --- /dev/null +++ b/apps/contacts/apps/web/src/lib/components/skeletons/DuplicateGroupSkeleton.svelte @@ -0,0 +1,89 @@ + + +
+ +
+
+ +
+ + +
+
+ +
+ + +
+
+ {#each Array(contactCount) as _, i} +
+ +
+ + +
+
+ {/each} +
+
+
+ + diff --git a/apps/contacts/apps/web/src/lib/components/skeletons/DuplicateListSkeleton.svelte b/apps/contacts/apps/web/src/lib/components/skeletons/DuplicateListSkeleton.svelte new file mode 100644 index 000000000..7e618b617 --- /dev/null +++ b/apps/contacts/apps/web/src/lib/components/skeletons/DuplicateListSkeleton.svelte @@ -0,0 +1,69 @@ + + +
+ +
+ {#each Array(3) as _} +
+ + +
+ {/each} +
+ + +
+ {#each Array(count) as _, i} + + {/each} +
+
+ + diff --git a/apps/contacts/apps/web/src/lib/components/skeletons/FavoriteCardSkeleton.svelte b/apps/contacts/apps/web/src/lib/components/skeletons/FavoriteCardSkeleton.svelte new file mode 100644 index 000000000..5d5d3214b --- /dev/null +++ b/apps/contacts/apps/web/src/lib/components/skeletons/FavoriteCardSkeleton.svelte @@ -0,0 +1,62 @@ + + +
+ +
+ +
+ + +
+ +
+ +
+ + +
+ +
+ + +
+ + +
+
+
+ + diff --git a/apps/contacts/apps/web/src/lib/components/skeletons/FavoriteGridSkeleton.svelte b/apps/contacts/apps/web/src/lib/components/skeletons/FavoriteGridSkeleton.svelte new file mode 100644 index 000000000..452e4c079 --- /dev/null +++ b/apps/contacts/apps/web/src/lib/components/skeletons/FavoriteGridSkeleton.svelte @@ -0,0 +1,56 @@ + + +
+ {#each Array(count) as _, i} + + {/each} +
+ + diff --git a/apps/contacts/apps/web/src/lib/components/skeletons/GoogleImportSkeleton.svelte b/apps/contacts/apps/web/src/lib/components/skeletons/GoogleImportSkeleton.svelte new file mode 100644 index 000000000..35305687c --- /dev/null +++ b/apps/contacts/apps/web/src/lib/components/skeletons/GoogleImportSkeleton.svelte @@ -0,0 +1,51 @@ + + +
+ +
+
+ +
+ + +
+
+ +
+ + +
+
+ +
+ + | + +
+
+ +
+ {#each Array(6) as _, i} +
+ + +
+ + +
+
+ {/each} +
+
+ + +
+ +
+
diff --git a/apps/contacts/apps/web/src/lib/components/skeletons/ImportPreviewSkeleton.svelte b/apps/contacts/apps/web/src/lib/components/skeletons/ImportPreviewSkeleton.svelte new file mode 100644 index 000000000..d62e68f64 --- /dev/null +++ b/apps/contacts/apps/web/src/lib/components/skeletons/ImportPreviewSkeleton.svelte @@ -0,0 +1,118 @@ + + +
+ +
+ {#each Array(3) as _} +
+ + +
+ {/each} +
+ + +
+
+ + +
+ +
+ {#each Array(5) as _, i} +
+ +
+ + +
+ +
+ {/each} +
+
+ + +
+ + +
+
+ + diff --git a/apps/contacts/apps/web/src/lib/components/skeletons/NetworkGraphSkeleton.svelte b/apps/contacts/apps/web/src/lib/components/skeletons/NetworkGraphSkeleton.svelte new file mode 100644 index 000000000..c1e3ae27a --- /dev/null +++ b/apps/contacts/apps/web/src/lib/components/skeletons/NetworkGraphSkeleton.svelte @@ -0,0 +1,115 @@ + + +
+ +
+ {#each Array(8) as _, i} +
+ +
+ {/each} +
+ + + + + + + + + + + +
+ + Netzwerk wird geladen... +
+
+ + diff --git a/apps/contacts/apps/web/src/lib/components/skeletons/TagCardSkeleton.svelte b/apps/contacts/apps/web/src/lib/components/skeletons/TagCardSkeleton.svelte new file mode 100644 index 000000000..09ff2e540 --- /dev/null +++ b/apps/contacts/apps/web/src/lib/components/skeletons/TagCardSkeleton.svelte @@ -0,0 +1,36 @@ + + +
+ +
+ + +
+ + +
+ +
+
+ + diff --git a/apps/contacts/apps/web/src/lib/components/skeletons/TagGridSkeleton.svelte b/apps/contacts/apps/web/src/lib/components/skeletons/TagGridSkeleton.svelte new file mode 100644 index 000000000..f1c72956f --- /dev/null +++ b/apps/contacts/apps/web/src/lib/components/skeletons/TagGridSkeleton.svelte @@ -0,0 +1,50 @@ + + +
+ {#each Array(count) as _, i} + + {/each} +
+ + diff --git a/apps/contacts/apps/web/src/lib/components/skeletons/index.ts b/apps/contacts/apps/web/src/lib/components/skeletons/index.ts new file mode 100644 index 000000000..82732122c --- /dev/null +++ b/apps/contacts/apps/web/src/lib/components/skeletons/index.ts @@ -0,0 +1,42 @@ +/** + * Contacts App Skeleton Components + * + * App-specific skeleton loaders that match the exact layout of contact components. + * Built on top of @manacore/shared-ui skeleton primitives. + */ + +// Contact List/Grid Skeletons +export { default as ContactRowSkeleton } from './ContactRowSkeleton.svelte'; +export { default as ContactListSkeleton } from './ContactListSkeleton.svelte'; +export { default as ContactCardSkeleton } from './ContactCardSkeleton.svelte'; +export { default as ContactGridSkeleton } from './ContactGridSkeleton.svelte'; + +// Tag Skeletons +export { default as TagCardSkeleton } from './TagCardSkeleton.svelte'; +export { default as TagGridSkeleton } from './TagGridSkeleton.svelte'; + +// Favorite Skeletons +export { default as FavoriteCardSkeleton } from './FavoriteCardSkeleton.svelte'; +export { default as FavoriteGridSkeleton } from './FavoriteGridSkeleton.svelte'; + +// Duplicate Skeletons +export { default as DuplicateGroupSkeleton } from './DuplicateGroupSkeleton.svelte'; +export { default as DuplicateListSkeleton } from './DuplicateListSkeleton.svelte'; + +// App Loading Skeleton +export { default as AppLoadingSkeleton } from './AppLoadingSkeleton.svelte'; + +// Import Preview Skeleton +export { default as ImportPreviewSkeleton } from './ImportPreviewSkeleton.svelte'; + +// Google Import Skeleton +export { default as GoogleImportSkeleton } from './GoogleImportSkeleton.svelte'; + +// Contact Detail Skeleton +export { default as ContactDetailSkeleton } from './ContactDetailSkeleton.svelte'; + +// Contact Notes Skeleton +export { default as ContactNotesSkeleton } from './ContactNotesSkeleton.svelte'; + +// Network Graph Skeleton +export { default as NetworkGraphSkeleton } from './NetworkGraphSkeleton.svelte'; diff --git a/apps/contacts/apps/web/src/routes/(app)/+layout.svelte b/apps/contacts/apps/web/src/routes/(app)/+layout.svelte index c0bffdd0b..7f4da318b 100644 --- a/apps/contacts/apps/web/src/routes/(app)/+layout.svelte +++ b/apps/contacts/apps/web/src/routes/(app)/+layout.svelte @@ -17,10 +17,14 @@ import { getPillAppItems } from '@manacore/shared-branding'; import { setLocale, supportedLocales } from '$lib/i18n'; import ContactDetailModal from '$lib/components/ContactDetailModal.svelte'; + import SearchModal from '$lib/components/SearchModal.svelte'; import { contactsStore } from '$lib/stores/contacts.svelte'; import { viewModeStore } from '$lib/stores/view-mode.svelte'; import { contactsSettings } from '$lib/stores/settings.svelte'; + // Search modal state + let searchModalOpen = $state(false); + // Check if we're on a contact detail route const contactDetailMatch = $derived($page.url.pathname.match(/^\/contacts\/([0-9a-f-]{36})$/i)); const showContactModal = $derived(!!contactDetailMatch); @@ -78,9 +82,10 @@ { href: '/', label: 'Kontakte', icon: 'users' }, { href: '/tags', label: 'Tags', icon: 'tag' }, { href: '/favorites', label: 'Favoriten', icon: 'heart' }, - { href: '/archive', label: 'Archiv', icon: 'archive' }, + { href: '/network', label: 'Netzwerk', icon: 'share-2' }, { href: '/settings', label: 'Einstellungen', icon: 'settings' }, { href: '/feedback', label: 'Feedback', icon: 'chat' }, + { href: '/help', label: 'Hilfe', icon: 'help-circle' }, ]; // Navigation shortcuts (Ctrl+1-5) @@ -92,7 +97,7 @@ // Cmd/Ctrl+K to open search (works even in inputs) if ((event.ctrlKey || event.metaKey) && event.key === 'k') { event.preventDefault(); - // TODO: Open search modal + searchModalOpen = true; return; } @@ -231,6 +236,9 @@ {#if showContactModal && modalContactId} {/if} + + + (searchModalOpen = false)} />
diff --git a/apps/todo/apps/web/src/lib/components/skeletons/KanbanBoardSkeleton.svelte b/apps/todo/apps/web/src/lib/components/skeletons/KanbanBoardSkeleton.svelte new file mode 100644 index 000000000..3f6ab58c9 --- /dev/null +++ b/apps/todo/apps/web/src/lib/components/skeletons/KanbanBoardSkeleton.svelte @@ -0,0 +1,70 @@ + + +
+
+ + + +
+
+
+
+
+ + diff --git a/apps/todo/apps/web/src/lib/components/skeletons/KanbanColumnSkeleton.svelte b/apps/todo/apps/web/src/lib/components/skeletons/KanbanColumnSkeleton.svelte new file mode 100644 index 000000000..43fddd36c --- /dev/null +++ b/apps/todo/apps/web/src/lib/components/skeletons/KanbanColumnSkeleton.svelte @@ -0,0 +1,99 @@ + + +
+ +
+
+ + + +
+ +
+ + +
+ {#each Array(taskCount) as _, i} +
+ +
+ + +
+
+ {/each} +
+ + +
+ +
+
+ + diff --git a/apps/todo/apps/web/src/lib/components/skeletons/StatisticsSkeleton.svelte b/apps/todo/apps/web/src/lib/components/skeletons/StatisticsSkeleton.svelte new file mode 100644 index 000000000..8cd238131 --- /dev/null +++ b/apps/todo/apps/web/src/lib/components/skeletons/StatisticsSkeleton.svelte @@ -0,0 +1,252 @@ + + +
+ +
+ {#each Array(6) as _, i} +
+ +
+ + +
+
+ {/each} +
+ + +
+ +
+
+ +
+
+ {#each Array(7) as _} +
+ {#each Array(12) as _} + + {/each} +
+ {/each} +
+
+ + +
+ +
+
+ +
+
+ {#each Array(7) as _, i} +
+ + +
+ {/each} +
+
+ + +
+
+ +
+
+ +
+
+ {#each Array(4) as _} +
+ + +
+ {/each} +
+
+
+ + +
+
+ +
+
+ {#each Array(4) as _, i} +
+
+ + +
+ +
+ {/each} +
+
+
+ + +
+ {#each Array(3) as _} +
+ + +
+ {/each} +
+
+ + diff --git a/apps/todo/apps/web/src/lib/components/skeletons/TaskItemSkeleton.svelte b/apps/todo/apps/web/src/lib/components/skeletons/TaskItemSkeleton.svelte new file mode 100644 index 000000000..9a2a08148 --- /dev/null +++ b/apps/todo/apps/web/src/lib/components/skeletons/TaskItemSkeleton.svelte @@ -0,0 +1,80 @@ + + +
+
+ +
+ +
+ + +
+
+ +
+ + {#if showSubtasks} +
+ {#each Array(2) as _} +
+ + +
+ {/each} +
+ {/if} +
+ + diff --git a/apps/todo/apps/web/src/lib/components/skeletons/TaskListSkeleton.svelte b/apps/todo/apps/web/src/lib/components/skeletons/TaskListSkeleton.svelte new file mode 100644 index 000000000..cd3f1cc18 --- /dev/null +++ b/apps/todo/apps/web/src/lib/components/skeletons/TaskListSkeleton.svelte @@ -0,0 +1,73 @@ + + +
+ {#each Array(sections) as _, sectionIndex} +
+ +
+
+ + + +
+ +
+ + +
+ {#each Array(tasksPerSection) as _, taskIndex} +
+ +
+ {/each} +
+
+ {/each} +
+ + diff --git a/apps/todo/apps/web/src/lib/components/skeletons/index.ts b/apps/todo/apps/web/src/lib/components/skeletons/index.ts new file mode 100644 index 000000000..6628b5579 --- /dev/null +++ b/apps/todo/apps/web/src/lib/components/skeletons/index.ts @@ -0,0 +1,20 @@ +/** + * Todo App Skeleton Components + * + * App-specific skeleton loaders that match the exact layout of todo components. + * Built on top of @manacore/shared-ui skeleton primitives. + */ + +// App Loading Skeleton +export { default as AppLoadingSkeleton } from './AppLoadingSkeleton.svelte'; + +// Task List Skeletons +export { default as TaskItemSkeleton } from './TaskItemSkeleton.svelte'; +export { default as TaskListSkeleton } from './TaskListSkeleton.svelte'; + +// Statistics Skeletons +export { default as StatisticsSkeleton } from './StatisticsSkeleton.svelte'; + +// Kanban Skeletons +export { default as KanbanColumnSkeleton } from './KanbanColumnSkeleton.svelte'; +export { default as KanbanBoardSkeleton } from './KanbanBoardSkeleton.svelte'; diff --git a/apps/todo/apps/web/src/routes/(app)/+page.svelte b/apps/todo/apps/web/src/routes/(app)/+page.svelte index a4818a266..00ef8a394 100644 --- a/apps/todo/apps/web/src/routes/(app)/+page.svelte +++ b/apps/todo/apps/web/src/routes/(app)/+page.svelte @@ -11,6 +11,7 @@ import QuickAddTask from '$lib/components/QuickAddTask.svelte'; import CollapsibleSection from '$lib/components/CollapsibleSection.svelte'; import TaskEditModal from '$lib/components/TaskEditModal.svelte'; + import { TaskListSkeleton } from '$lib/components/skeletons'; import type { Task } from '@todo/shared'; let isLoading = $state(true); @@ -130,11 +131,7 @@ {#if isLoading || tasksStore.loading} -
-
-
+ {:else if tasksStore.error}
{tasksStore.error} diff --git a/apps/todo/apps/web/src/routes/(app)/statistics/+page.svelte b/apps/todo/apps/web/src/routes/(app)/statistics/+page.svelte index 261aaded5..1f39e20e2 100644 --- a/apps/todo/apps/web/src/routes/(app)/statistics/+page.svelte +++ b/apps/todo/apps/web/src/routes/(app)/statistics/+page.svelte @@ -8,6 +8,7 @@ import WeeklyTrendChart from '$lib/components/statistics/WeeklyTrendChart.svelte'; import PriorityDonutChart from '$lib/components/statistics/PriorityDonutChart.svelte'; import ProjectProgressBars from '$lib/components/statistics/ProjectProgressBars.svelte'; + import { StatisticsSkeleton } from '$lib/components/skeletons'; import { BarChart3 } from 'lucide-svelte'; let loading = $state(true); @@ -44,10 +45,7 @@ {#if loading} -
- -

Lade Statistiken...

-
+ {:else}
@@ -155,31 +153,6 @@ margin: 0.25rem 0 0 0; } - .loading-container { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 1rem; - padding: 4rem 2rem; - color: hsl(var(--muted-foreground)); - } - - .loading-spinner { - width: 32px; - height: 32px; - border: 3px solid hsl(var(--muted) / 0.3); - border-top-color: #8b5cf6; - border-radius: 50%; - animation: spin 0.8s linear infinite; - } - - @keyframes spin { - to { - transform: rotate(360deg); - } - } - .stats-section { margin-bottom: 1.5rem; } diff --git a/apps/todo/apps/web/src/routes/+layout.svelte b/apps/todo/apps/web/src/routes/+layout.svelte index 1d97fe43e..78045c14d 100644 --- a/apps/todo/apps/web/src/routes/+layout.svelte +++ b/apps/todo/apps/web/src/routes/+layout.svelte @@ -3,6 +3,7 @@ import { onMount } from 'svelte'; import { theme } from '$lib/stores/theme'; import { authStore } from '$lib/stores/auth.svelte'; + import { AppLoadingSkeleton } from '$lib/components/skeletons'; let { children } = $props(); @@ -20,14 +21,7 @@ {#if loading} -
-
-
-

Laden...

-
-
+ {:else}
{@render children()} diff --git a/packages/shared-ui/src/index.ts b/packages/shared-ui/src/index.ts index 445de250d..b735e8594 100644 --- a/packages/shared-ui/src/index.ts +++ b/packages/shared-ui/src/index.ts @@ -15,7 +15,15 @@ export { TagBadge } from './molecules'; export { AudioPlayer } from './molecules'; // Loading/Skeletons -export { SkeletonBox, SkeletonText } from './molecules'; +export { + SkeletonBox, + SkeletonText, + SkeletonAvatar, + SkeletonRow, + SkeletonList, + SkeletonCard, + SkeletonGrid, +} from './molecules'; // Feedback export { EmptyState } from './molecules'; diff --git a/packages/shared-ui/src/molecules/index.ts b/packages/shared-ui/src/molecules/index.ts index 6766ee887..97024aea5 100644 --- a/packages/shared-ui/src/molecules/index.ts +++ b/packages/shared-ui/src/molecules/index.ts @@ -15,7 +15,15 @@ export { TagBadge } from './tags'; export { AudioPlayer } from './media'; // Loading components -export { SkeletonBox, SkeletonText } from './loaders'; +export { + SkeletonBox, + SkeletonText, + SkeletonAvatar, + SkeletonRow, + SkeletonList, + SkeletonCard, + SkeletonGrid, +} from './loaders'; // Feedback components export { EmptyState } from './feedback'; diff --git a/packages/shared-ui/src/molecules/loaders/SkeletonAvatar.svelte b/packages/shared-ui/src/molecules/loaders/SkeletonAvatar.svelte new file mode 100644 index 000000000..097cbc1b3 --- /dev/null +++ b/packages/shared-ui/src/molecules/loaders/SkeletonAvatar.svelte @@ -0,0 +1,24 @@ + + + diff --git a/packages/shared-ui/src/molecules/loaders/SkeletonCard.svelte b/packages/shared-ui/src/molecules/loaders/SkeletonCard.svelte new file mode 100644 index 000000000..32df4cd27 --- /dev/null +++ b/packages/shared-ui/src/molecules/loaders/SkeletonCard.svelte @@ -0,0 +1,69 @@ + + +
+
+ {#if showAvatar} + + {/if} +
+ {#if titleLines > 0} + + {/if} + {#if bodyLines > 0} +
+ +
+ {/if} +
+
+ {#if showFooter} +
+ + +
+ {/if} +
diff --git a/packages/shared-ui/src/molecules/loaders/SkeletonGrid.svelte b/packages/shared-ui/src/molecules/loaders/SkeletonGrid.svelte new file mode 100644 index 000000000..7fbf8249e --- /dev/null +++ b/packages/shared-ui/src/molecules/loaders/SkeletonGrid.svelte @@ -0,0 +1,61 @@ + + +
+ {#each Array(count) as _, i} + + {/each} +
diff --git a/packages/shared-ui/src/molecules/loaders/SkeletonList.svelte b/packages/shared-ui/src/molecules/loaders/SkeletonList.svelte new file mode 100644 index 000000000..0cb3fd30d --- /dev/null +++ b/packages/shared-ui/src/molecules/loaders/SkeletonList.svelte @@ -0,0 +1,52 @@ + + +
+ {#each Array(count) as _, i} + + {/each} +
diff --git a/packages/shared-ui/src/molecules/loaders/SkeletonRow.svelte b/packages/shared-ui/src/molecules/loaders/SkeletonRow.svelte new file mode 100644 index 000000000..5198a993a --- /dev/null +++ b/packages/shared-ui/src/molecules/loaders/SkeletonRow.svelte @@ -0,0 +1,60 @@ + + +
+ {#if showAvatar} + + {/if} +
+ + {#if showSecondaryLine} +
+ +
+ {/if} +
+ {#if showRightContent} + + {/if} +
diff --git a/packages/shared-ui/src/molecules/loaders/index.ts b/packages/shared-ui/src/molecules/loaders/index.ts index 536a53011..4655a92d2 100644 --- a/packages/shared-ui/src/molecules/loaders/index.ts +++ b/packages/shared-ui/src/molecules/loaders/index.ts @@ -1,5 +1,25 @@ /** * Loading state components + * + * Primitives: + * - SkeletonBox: Base rectangular skeleton with shimmer + * - SkeletonText: Multi-line text skeleton + * - SkeletonAvatar: Circular avatar skeleton + * + * Composites: + * - SkeletonRow: Single list row with avatar + text + * - SkeletonList: Multiple rows with fade effect + * - SkeletonCard: Card with avatar, title, body, footer + * - SkeletonGrid: Grid of cards with fade effect */ + +// Primitives export { default as SkeletonBox } from './SkeletonBox.svelte'; export { default as SkeletonText } from './SkeletonText.svelte'; +export { default as SkeletonAvatar } from './SkeletonAvatar.svelte'; + +// Composites +export { default as SkeletonRow } from './SkeletonRow.svelte'; +export { default as SkeletonList } from './SkeletonList.svelte'; +export { default as SkeletonCard } from './SkeletonCard.svelte'; +export { default as SkeletonGrid } from './SkeletonGrid.svelte';