diff options
| author | Fuwn <[email protected]> | 2024-01-25 08:45:42 -0800 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2024-01-25 08:45:42 -0800 |
| commit | 86abdf2fd37b8ccc712df91a96691cf1c4ca1008 (patch) | |
| tree | de457f185dc38049d54a8ecb9edb687bf95386b8 /src/routes/user | |
| parent | feat(birthdays): grid skeleton ui (diff) | |
| download | due.moe-86abdf2fd37b8ccc712df91a96691cf1c4ca1008.tar.xz due.moe-86abdf2fd37b8ccc712df91a96691cf1c4ca1008.zip | |
feat: more fluid skeleton ui
Diffstat (limited to 'src/routes/user')
| -rw-r--r-- | src/routes/user/[user]/+page.svelte | 4 | ||||
| -rw-r--r-- | src/routes/user/[user]/badges/+page.svelte | 26 |
2 files changed, 6 insertions, 24 deletions
diff --git a/src/routes/user/[user]/+page.svelte b/src/routes/user/[user]/+page.svelte index 0fd32101..67cb480f 100644 --- a/src/routes/user/[user]/+page.svelte +++ b/src/routes/user/[user]/+page.svelte @@ -41,9 +41,7 @@ Does this user exist? {:else if userData === undefined} - <p>Loading user ... 50%</p> - - <Skeleton card={false} count={1} /> + <Skeleton card={false} count={1} height="224px" /> {:else} <div class="card" diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte index 6b4b45e1..e41d294c 100644 --- a/src/routes/user/[user]/badges/+page.svelte +++ b/src/routes/user/[user]/badges/+page.svelte @@ -1,13 +1,11 @@ <script lang="ts"> import { userIdentity } from '$lib/AniList/identity'; import { user } from '$lib/AniList/user'; - import { nbsp } from '$lib/Utility/html'; import type { Badge } from '$lib/Database/badges'; // import { domToBlob } from 'modern-screenshot'; import { onMount } from 'svelte'; import HeadTitle from '$lib/Home/HeadTitle.svelte'; import { databaseTimeToDate, dateToDatabaseTime } from '$lib/Utility/time'; - import Loading from '$lib/Utility/Loading.svelte'; import root from '$lib/Utility/root.js'; import tooltip from '$lib/Tooltip/tooltip.js'; import proxy from '$lib/Utility/proxy.js'; @@ -291,24 +289,16 @@ </div> {:else} {#await currentUserIdentity} - <Loading type="badges" percent={40} /> - - <p /> - - <Skeleton grid={true} count={100} /> + <Skeleton grid={true} count={100} width="150px" height="170px" /> {:then identity} {@const isOwner = identity && identity.name === data.username} {#await badgesPromise} - <Loading type="user identity" percent={60} /> - - <p /> - - <Skeleton grid={true} count={100} /> + <Skeleton grid={true} count={100} width="150px" height="170px" /> {:then badgesResponse} {#if badgesResponse} {#await badgesResponse.json()} - <Loading type="badges" percent={80} /> + <Skeleton grid={true} count={100} width="150px" height="170px" /> {:then ungroupedBadges} <div id="badges"> {#await awcPromise then badges} @@ -349,9 +339,7 @@ {/await} {#if ungroupedBadges === null} - <Loading> - {@html nbsp('Loading badges ... 50%')} - </Loading> + <Skeleton grid={true} count={10} width="150px" height="170px" /> {:else if ungroupedBadges.length === 0} <div class="card"> No due.moe registered badges found for this user. <a @@ -526,11 +514,7 @@ <div class="card">Could not parse badges</div> {/await} {:else} - <Loading type="badges" percent={20} /> - - <p /> - - <Skeleton grid={true} count={100} /> + <Skeleton grid={true} count={100} width="150px" height="170px" /> {/if} {:catch} <div class="card">Could not fetch badges</div> |