aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/routes/+page.svelte99
-rw-r--r--src/routes/completed/+page.svelte71
-rw-r--r--static/sample-media/anime.json (renamed from src/lib/Data/Static/SampleMedia/anime.json)0
-rw-r--r--static/sample-media/manga.json (renamed from src/lib/Data/Static/SampleMedia/manga.json)0
4 files changed, 145 insertions, 25 deletions
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 21fd7b01..ecd799d8 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,30 +1,71 @@
<script lang="ts">
+import type { Component } from "svelte";
import Spacer from "$lib/Layout/Spacer.svelte";
import { onDestroy, onMount } from "svelte";
-import MangaListTemplate from "$lib/List/Manga/MangaListTemplate.svelte";
-import UpcomingAnimeList from "$lib/List/Anime/UpcomingAnimeList.svelte";
import userIdentity from "$stores/identity.js";
import settings from "$stores/settings";
import ListTitle from "$lib/List/ListTitle.svelte";
import HeadTitle from "$lib/Home/HeadTitle.svelte";
-import LastActivity from "$lib/Home/LastActivity.svelte";
import { createHeightObserver } from "$lib/Utility/html.js";
import Skeleton from "$lib/Loading/Skeleton.svelte";
import locale from "$stores/locale.js";
import Landing from "$lib/Landing.svelte";
import LandingHero from "$lib/LandingHero.svelte";
-import IndexColumn from "$lib/List/Anime/DueIndexColumn.svelte";
import stateBin from "$stores/stateBin.js";
import type { PageData } from "./$types";
-export let data: PageData;
+let { data }: { data: PageData } = $props();
+
+type UserProp = PageData["user"];
+type LastActivitySvelteComponent = Component<{
+ user: UserProp;
+}>;
+type UpcomingAnimeListSvelteComponent = Component<{
+ user: UserProp;
+}>;
+type IndexColumnSvelteComponent = Component<{
+ user: UserProp;
+ userIdentity: { id: number };
+}>;
+type MangaListTemplateSvelteComponent = Component<{
+ user: UserProp;
+ displayUnresolved: boolean;
+ due: boolean;
+}>;
let removeHeightObserver: (() => void) | undefined;
+let LastActivityComponent: LastActivitySvelteComponent | null = $state(null);
+let UpcomingAnimeListComponent: UpcomingAnimeListSvelteComponent | null =
+ $state(null);
+let IndexColumnComponent: IndexColumnSvelteComponent | null = $state(null);
+let MangaListTemplateComponent: MangaListTemplateSvelteComponent | null =
+ $state(null);
+let authenticatedHomeSurfaceImport: Promise<void> | null = null;
+
+const loadAuthenticatedHomeSurface = () => {
+ if (data.user === undefined) return null;
+ if (authenticatedHomeSurfaceImport) return authenticatedHomeSurfaceImport;
+
+ authenticatedHomeSurfaceImport = Promise.all([
+ import("$lib/Home/LastActivity.svelte"),
+ import("$lib/List/Anime/UpcomingAnimeList.svelte"),
+ import("$lib/List/Anime/DueIndexColumn.svelte"),
+ import("$lib/List/Manga/MangaListTemplate.svelte"),
+ ]).then(([lastActivity, upcomingAnimeList, indexColumn, mangaListTemplate]) => {
+ LastActivityComponent = lastActivity.default;
+ UpcomingAnimeListComponent = upcomingAnimeList.default;
+ IndexColumnComponent = indexColumn.default;
+ MangaListTemplateComponent = mangaListTemplate.default;
+ });
+
+ return authenticatedHomeSurfaceImport;
+};
onMount(() => {
removeHeightObserver = createHeightObserver();
$stateBin.upcomingAnimeListOpen ??= true;
$stateBin.dueMangaListOpen ??= true;
+ void loadAuthenticatedHomeSurface();
});
onDestroy(() => removeHeightObserver?.());
@@ -32,7 +73,9 @@ onDestroy(() => removeHeightObserver?.());
<HeadTitle />
-<LastActivity user={data.user} />
+{#if LastActivityComponent}
+ <LastActivityComponent user={data.user} />
+{/if}
{#if data.user === undefined}
<LandingHero />
@@ -57,7 +100,13 @@ onDestroy(() => removeHeightObserver?.());
{#if !$settings.disableUpcomingAnime}
<details bind:open={$stateBin.upcomingAnimeListOpen} class="list list-upcoming">
{#if $userIdentity.id !== -2}
- <UpcomingAnimeList user={data.user} />
+ {#if UpcomingAnimeListComponent}
+ <UpcomingAnimeListComponent user={data.user} />
+ {:else}
+ <ListTitle title={$locale().lists.upcoming.episodes} />
+
+ <Skeleton card={false} count={5} height="0.9rem" list />
+ {/if}
{:else}
<ListTitle title={$locale().lists.upcoming.episodes} />
@@ -67,23 +116,45 @@ onDestroy(() => removeHeightObserver?.());
{/if}
{#if !$settings.disableAnime && !$settings.disableManga}
- <IndexColumn user={data.user} userIdentity={$userIdentity} />
+ {#if IndexColumnComponent}
+ <IndexColumnComponent user={data.user} userIdentity={$userIdentity} />
+ {:else}
+ <details bind:open={$stateBin.dueAnimeListOpen} class="list list-due">
+ <ListTitle title={$locale().lists.due.episodes} />
+
+ <Skeleton card={false} count={5} height="0.9rem" list />
+ </details>
+ {/if}
{/if}
</div>
<div class="right-column">
{#if !$settings.disableAnime && $settings.disableManga}
- <IndexColumn user={data.user} userIdentity={$userIdentity} />
+ {#if IndexColumnComponent}
+ <IndexColumnComponent user={data.user} userIdentity={$userIdentity} />
+ {:else}
+ <details bind:open={$stateBin.dueAnimeListOpen} class="list list-due">
+ <ListTitle title={$locale().lists.due.episodes} />
+
+ <Skeleton card={false} count={5} height="0.9rem" list />
+ </details>
+ {/if}
{/if}
{#if !$settings.disableManga}
<details bind:open={$stateBin.dueMangaListOpen} class="list list-manga">
{#if $userIdentity.id !== -2}
- <MangaListTemplate
- user={data.user}
- displayUnresolved={$settings.displayUnresolved}
- due={true}
- />
+ {#if MangaListTemplateComponent}
+ <MangaListTemplateComponent
+ user={data.user}
+ displayUnresolved={$settings.displayUnresolved}
+ due={true}
+ />
+ {:else}
+ <ListTitle title={$locale().lists.due.mangaAndLightNovels} />
+
+ <Skeleton card={false} count={5} height="0.9rem" list />
+ {/if}
{:else}
<ListTitle title={$locale().lists.due.mangaAndLightNovels} />
diff --git a/src/routes/completed/+page.svelte b/src/routes/completed/+page.svelte
index 96df8b90..220901bf 100644
--- a/src/routes/completed/+page.svelte
+++ b/src/routes/completed/+page.svelte
@@ -1,13 +1,11 @@
<script lang="ts">
+import type { Component } from "svelte";
import Spacer from "$lib/Layout/Spacer.svelte";
import { onDestroy, onMount } from "svelte";
import userIdentity from "$stores/identity.js";
import settings from "$stores/settings";
-import WatchingAnimeList from "$lib/List/Anime/CompletedAnimeList.svelte";
import ListTitle from "$lib/List/ListTitle.svelte";
-import MangaListTemplate from "$lib/List/Manga/MangaListTemplate.svelte";
import HeadTitle from "$lib/Home/HeadTitle.svelte";
-import LastActivity from "$lib/Home/LastActivity.svelte";
import { createHeightObserver } from "$lib/Utility/html.js";
import Skeleton from "$lib/Loading/Skeleton.svelte";
import locale from "$stores/locale.js";
@@ -15,14 +13,51 @@ import Landing from "$lib/Landing.svelte";
import stateBin from "$stores/stateBin.js";
import type { PageData } from "./$types";
-export let data: PageData;
+let { data }: { data: PageData } = $props();
+
+type UserProp = PageData["user"];
+type LastActivitySvelteComponent = Component<{
+ user: UserProp;
+}>;
+type WatchingAnimeListSvelteComponent = Component<{
+ user: UserProp;
+}>;
+type MangaListTemplateSvelteComponent = Component<{
+ user: UserProp;
+ displayUnresolved: boolean;
+ due: boolean;
+}>;
let removeHeightObserver: (() => void) | undefined;
+let LastActivityComponent: LastActivitySvelteComponent | null = $state(null);
+let WatchingAnimeListComponent: WatchingAnimeListSvelteComponent | null =
+ $state(null);
+let MangaListTemplateComponent: MangaListTemplateSvelteComponent | null =
+ $state(null);
+let completedSurfaceImport: Promise<void> | null = null;
+
+const loadCompletedSurface = () => {
+ if (data.user === undefined) return null;
+ if (completedSurfaceImport) return completedSurfaceImport;
+
+ completedSurfaceImport = Promise.all([
+ import("$lib/Home/LastActivity.svelte"),
+ import("$lib/List/Anime/CompletedAnimeList.svelte"),
+ import("$lib/List/Manga/MangaListTemplate.svelte"),
+ ]).then(([lastActivity, watchingAnimeList, mangaListTemplate]) => {
+ LastActivityComponent = lastActivity.default;
+ WatchingAnimeListComponent = watchingAnimeList.default;
+ MangaListTemplateComponent = mangaListTemplate.default;
+ });
+
+ return completedSurfaceImport;
+};
onMount(() => {
removeHeightObserver = createHeightObserver();
$stateBin.completedAnimeListOpen ??= true;
$stateBin.completedMangaListOpen ??= true;
+ void loadCompletedSurface();
});
onDestroy(() => removeHeightObserver?.());
@@ -30,7 +65,9 @@ onDestroy(() => removeHeightObserver?.());
<HeadTitle route="Completed" path="/completed" />
-<LastActivity user={data.user} />
+{#if LastActivityComponent}
+ <LastActivityComponent user={data.user} />
+{/if}
{#if data.user === undefined}
<div class="card">Please log in to view completed media.</div>
@@ -43,7 +80,13 @@ onDestroy(() => removeHeightObserver?.());
{#if !$settings.displayFiltersIncludeCompleted || !$settings.disableAnime}
<details bind:open={$stateBin.completedAnimeListOpen} class="list">
{#if $userIdentity.id !== -2}
- <WatchingAnimeList user={data.user} />
+ {#if WatchingAnimeListComponent}
+ <WatchingAnimeListComponent user={data.user} />
+ {:else}
+ <ListTitle title={$locale().lists.completed.anime} />
+
+ <Skeleton card={false} count={5} height="0.9rem" list />
+ {/if}
{:else}
<ListTitle title={$locale().lists.completed.anime} />
@@ -55,11 +98,17 @@ onDestroy(() => removeHeightObserver?.());
{#if !$settings.displayFiltersIncludeCompleted || !$settings.disableManga}
<details bind:open={$stateBin.completedMangaListOpen} class="list">
{#if $userIdentity.id !== -2}
- <MangaListTemplate
- user={data.user}
- displayUnresolved={$settings.displayUnresolved}
- due={false}
- />
+ {#if MangaListTemplateComponent}
+ <MangaListTemplateComponent
+ user={data.user}
+ displayUnresolved={$settings.displayUnresolved}
+ due={false}
+ />
+ {:else}
+ <ListTitle title={$locale().lists.completed.mangaAndLightNovels} />
+
+ <Skeleton card={false} count={5} height="0.9rem" list />
+ {/if}
{:else}
<ListTitle title={$locale().lists.completed.mangaAndLightNovels} />
diff --git a/src/lib/Data/Static/SampleMedia/anime.json b/static/sample-media/anime.json
index f55f7bb0..f55f7bb0 100644
--- a/src/lib/Data/Static/SampleMedia/anime.json
+++ b/static/sample-media/anime.json
diff --git a/src/lib/Data/Static/SampleMedia/manga.json b/static/sample-media/manga.json
index 82aa4024..82aa4024 100644
--- a/src/lib/Data/Static/SampleMedia/manga.json
+++ b/static/sample-media/manga.json
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-24 06:30:28 +0000