diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/lib/Error/RateLimited.svelte | 75 | ||||
| -rw-r--r-- | src/lib/Loading.svelte | 13 | ||||
| -rw-r--r-- | src/lib/Tools/Birthdays.svelte | 9 | ||||
| -rw-r--r-- | src/lib/Tools/Schedule/Tool.svelte | 13 | ||||
| -rw-r--r-- | src/lib/Tools/Wrapped.svelte | 16 | ||||
| -rw-r--r-- | src/routes/+page.svelte | 2 | ||||
| -rw-r--r-- | src/routes/settings/+page.svelte | 2 |
7 files changed, 76 insertions, 54 deletions
diff --git a/src/lib/Error/RateLimited.svelte b/src/lib/Error/RateLimited.svelte index ce5afdba..1861ca16 100644 --- a/src/lib/Error/RateLimited.svelte +++ b/src/lib/Error/RateLimited.svelte @@ -3,46 +3,49 @@ export let loginSessionError = true; export let contact = true; export let list = true; + export let card = false; </script> -{#if list} - <ul> - <li> - <p> - {type} could not be loaded. You might have been - <a href="https://en.wikipedia.org/wiki/Rate_limiting" target="_blank">rate limited</a>. - </p> - {#if loginSessionError} - <p> - Your login session may have expired. Try logging out and logging back in, or try again in - a few minutes. - </p> - {/if} - <slot /> - {#if contact} +<div class:card> + {#if list} + <ul> + <li> <p> - If the problem persists, please contact - <a href="https://anilist.co/user/fuwn" target="_blank">@fuwn</a> on AniList. + {type} could not be loaded. You might have been + <a href="https://en.wikipedia.org/wiki/Rate_limiting" target="_blank">rate limited</a>. </p> - {/if} - </li> - </ul> -{:else} - <p> - {type} could not be loaded. You might have been - <a href="https://en.wikipedia.org/wiki/Rate_limiting" target="_blank">rate limited</a>. - </p> - {#if loginSessionError} + {#if loginSessionError} + <p> + Your login session may have expired. Try logging out and logging back in, or try again + in a few minutes. + </p> + {/if} + <slot /> + {#if contact} + <p> + If the problem persists, please contact + <a href="https://anilist.co/user/fuwn" target="_blank">@fuwn</a> on AniList. + </p> + {/if} + </li> + </ul> + {:else} <p> - Your login session may have expired. Try logging out and logging back in, or try again in a - few minutes. - </p> - {/if} - <slot /> - {#if contact} - <p> - If the problem persists, please contact - <a href="https://anilist.co/user/fuwn" target="_blank">@fuwn</a> on AniList. + {type} could not be loaded. You might have been + <a href="https://en.wikipedia.org/wiki/Rate_limiting" target="_blank">rate limited</a>. </p> + {#if loginSessionError} + <p> + Your login session may have expired. Try logging out and logging back in, or try again in a + few minutes. + </p> + {/if} + <slot /> + {#if contact} + <p> + If the problem persists, please contact + <a href="https://anilist.co/user/fuwn" target="_blank">@fuwn</a> on AniList. + </p> + {/if} {/if} -{/if} +</div> diff --git a/src/lib/Loading.svelte b/src/lib/Loading.svelte new file mode 100644 index 00000000..829a3a45 --- /dev/null +++ b/src/lib/Loading.svelte @@ -0,0 +1,13 @@ +<script lang="ts"> + export let type: string | undefined = undefined; + export let percent: number | undefined = undefined; + export let card = true; +</script> + +<div class:card> + {#if type} + Loading {type} ...{percent ? ` ${percent}%` : ''} + {:else} + <slot /> + {/if} +</div> diff --git a/src/lib/Tools/Birthdays.svelte b/src/lib/Tools/Birthdays.svelte index eda5e90e..19509d14 100644 --- a/src/lib/Tools/Birthdays.svelte +++ b/src/lib/Tools/Birthdays.svelte @@ -6,6 +6,7 @@ import Error from '$lib/Error/RateLimited.svelte'; import { onMount } from 'svelte'; import { clearAllParameters, parseOrDefault } from '../Utility/parameters'; + import Loading from '$lib/Loading.svelte'; interface Birthday { name: string; @@ -84,10 +85,10 @@ </script> {#await acdbBirthdays} - Loading 33% ... + <Loading type="character birthday data" percent={33} /> {:then acdbBirthdays} {#await anisearchBirthdays} - Loading 66% ... + <Loading type="character birthday data" percent={66} /> {:then anisearch} {@const birthdays = combineBirthdaySources(acdbBirthdays, anisearch)} @@ -123,10 +124,10 @@ {/each} </div> {:catch} - <Error type="Character" /> + <Error type="Character" card /> {/await} {:catch} - <Error type="Character" /> + <Error type="Character" card /> {/await} <style> diff --git a/src/lib/Tools/Schedule/Tool.svelte b/src/lib/Tools/Schedule/Tool.svelte index 349f98d0..bc48e423 100644 --- a/src/lib/Tools/Schedule/Tool.svelte +++ b/src/lib/Tools/Schedule/Tool.svelte @@ -15,6 +15,7 @@ import { onMouseEnter, onMouseLeave, onMouseMove } from '$lib/Media/Cover/hoverCover'; import HoverCover from '$lib/Media/Cover/HoverCover.svelte'; import Crunchyroll from '$lib/Tools/Schedule/Crunchyroll.svelte'; + import Loading from '$lib/Loading.svelte'; let subsPleasePromise: Promise<SubsPlease>; let scheduledMediaPromise: Promise<Partial<Media[]>>; @@ -94,11 +95,11 @@ </blockquote> {#await subsPleasePromise} - Loading subtitle release data ... 49.5% + <Loading type="subtitle release data" percent={49.5} /> {:then subsPlease} {#if subsPlease} {#await scheduledMediaPromise} - Loading anime schedule ... 82.5% + <Loading type="anime schedule" percent={82.5} /> {:then scheduledMedia} {#if scheduledMedia} {@const columnCount = Math.ceil(Object.keys(subsPlease.schedule).length / 2)} @@ -178,16 +179,16 @@ {/each} </div> {:else} - Loading anime schedule ... 66% + <Loading type="anime schedule" percent={66} /> {/if} {:catch} - <Error type="Media" loginSessionError={false} /> + <Error type="Media" loginSessionError={false} card /> {/await} {:else} - Loading subtitle release data ... 33% + <Loading type="subtitle release data" percent={33} /> {/if} {:catch} - <Error type="Schedule" loginSessionError={false} /> + <Error type="Schedule" loginSessionError={false} card /> {/await} <p /> diff --git a/src/lib/Tools/Wrapped.svelte b/src/lib/Tools/Wrapped.svelte index d2999de2..e29ddb48 100644 --- a/src/lib/Tools/Wrapped.svelte +++ b/src/lib/Tools/Wrapped.svelte @@ -29,6 +29,7 @@ import MediaExtras from './Wrapped/MediaExtras.svelte'; import MediaPanel from './Wrapped/Media.svelte'; import Watermark from './Wrapped/Watermark.svelte'; + import Loading from '$lib/Loading.svelte'; export let user: AniListAuthorisation; @@ -487,14 +488,14 @@ <div class="card">Please log in to view this page.</div> {:else if currentUserIdentity.id !== -1} {#await selectedYear !== currentYear || useFullActivityHistory || new Date().getMonth() <= 6 ? fullActivityHistory(user, currentUserIdentity, selectedYear) : getActivityHistory(currentUserIdentity)} - <div class="card"> + <Loading> {@html nbsp(`Loading${useFullActivityHistory ? ' full-year' : ''} activity history ...`)} - </div> + </Loading> {:then activities} {#await wrapped(user, currentUserIdentity, selectedYear)} - <div class="card"> + <Loading> {@html nbsp('Loading user data ...')} - </div> + </Loading> {:then wrapped} <div id="list-container"> <div class="card"> @@ -670,10 +671,11 @@ </div> </div> {:catch} - <Error type="User" /> + <Error type="User" card /> {/await} {:catch} <Error + card type={`${useFullActivityHistory ? 'Full-year activity' : 'Activity'} history`} loginSessionError={!useFullActivityHistory} > @@ -687,7 +689,9 @@ </Error> {/await} {:else} - {@html nbsp('Loading user identity ...')} + <Loading> + {@html nbsp('Loading user identity ...')} + </Loading> {/if} <style> diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 13af2e3b..ae40d6a6 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -43,7 +43,7 @@ };`} > {#if data.user === undefined} - Please log in to view due media. + <div class="card">Please log in to view due media.</div> {:else} {#if !$settings.disableUpcomingAnime} <details open={!$settings.displayUpcomingAnimeCollapsed} class="list"> diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte index 922c86b9..749a4fe9 100644 --- a/src/routes/settings/+page.svelte +++ b/src/routes/settings/+page.svelte @@ -31,7 +31,7 @@ </blockquote> {#if data.user === undefined} - Please log in to modify settings. + <div class="card">Please log in to modify settings.</div> {:else} <Category title="RSS Feeds" id="feeds"> <button |