diff options
| author | Fuwn <[email protected]> | 2024-01-24 21:08:08 -0800 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2024-01-24 21:08:08 -0800 |
| commit | 2e2ec9878c7bb71c1a3d6276653a7ae4e193193d (patch) | |
| tree | a3022fe61708068031f57e4cc6f90018ddebfc55 /src | |
| parent | feat(identity): use global store (diff) | |
| download | due.moe-2e2ec9878c7bb71c1a3d6276653a7ae4e193193d.tar.xz due.moe-2e2ec9878c7bb71c1a3d6276653a7ae4e193193d.zip | |
feat(layout): skeleton ui on load
Diffstat (limited to 'src')
| -rw-r--r-- | src/lib/Skeleton.svelte | 43 | ||||
| -rw-r--r-- | src/routes/+layout.svelte | 3 |
2 files changed, 46 insertions, 0 deletions
diff --git a/src/lib/Skeleton.svelte b/src/lib/Skeleton.svelte new file mode 100644 index 00000000..5db5fb0b --- /dev/null +++ b/src/lib/Skeleton.svelte @@ -0,0 +1,43 @@ +<script lang="ts"> + export let count = 3; +</script> + +{#each Array(count) as _, i} + <div class="card card-small"> + <div class="skeleton-container"> + <div class="skeleton" /> + </div> + </div> + + {#if i < count - 1} + <p /> + {/if} +{/each} + +<style> + @keyframes progress { + 0% { + background-position: -200px 0; + } + 100% { + background-position: calc(200px + 100%) 0; + } + } + + .skeleton-container { + animation: progress 1.2s ease-in-out infinite; + background-color: var(--base001); + background-image: linear-gradient(90deg, var(--base0011), var(--base01), var(--base0011)); + background-size: 200px 100%; + background-repeat: no-repeat; + border-radius: 8px; + } + + .skeleton { + height: 100px; + border-radius: 4px; + display: inline-block; + line-height: 1; + width: 100%; + } +</style> diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 3b243232..21cb38e3 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -18,6 +18,7 @@ import japanese from '$lib/Locale/japanese'; import type { LocaleDictionary } from '$lib/Locale/layout'; import locale from '$stores/locale'; + import Skeleton from '$lib/Skeleton.svelte'; export let data; @@ -114,6 +115,8 @@ <Notifications item={Notification} zIndex={5000}> {#if $userIdentity.id !== -1} <Root {data} {way}><slot /></Root> + {:else} + <Skeleton /> {/if} </Notifications> </div> |