Skip to content

Commit df6dd11

Browse files
gleichgleich
committed
feat: page loading
1 parent e37f029 commit df6dd11

File tree

11 files changed

+126
-96
lines changed

11 files changed

+126
-96
lines changed

‎src/lib/index/sections/games/games-section.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import Section from '$lib/index/section.svelte';
44
import type { LcpResponse } from '$lib/lcp/lcp.server';
55
import type { Game } from '$lib/lcp/steam';
6-
import SectionLoading from '$lib/section-loading.svelte';
6+
import SectionLoading from '$lib/loading/section-loading.svelte';
77
import Stats from '$lib/stats.svelte';
88
import { renderDuration } from '$lib/time';
99
import { Card, Error, Image } from '@gleich/ui';

‎src/lib/index/sections/music/music-section.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import Section from '$lib/index/section.svelte';
44
import type { AppleMusicPlaylistSummary, AppleMusicSong, CacheData } from '$lib/lcp/applemusic';
55
import type { LcpResponse } from '$lib/lcp/lcp.server';
6-
import SectionLoading from '$lib/section-loading.svelte';
6+
import SectionLoading from '$lib/loading/section-loading.svelte';
77
import { Error } from '@gleich/ui';
88
import Playlist from './playlist.svelte';
99
import Song from './song.svelte';

‎src/lib/index/sections/projects/project-section.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import Section from '$lib/index/section.svelte';
44
import type { Repository } from '$lib/lcp/github';
55
import type { LcpResponse } from '$lib/lcp/lcp.server';
6-
import SectionLoading from '$lib/section-loading.svelte';
6+
import SectionLoading from '$lib/loading/section-loading.svelte';
77
import Since from '$lib/time/since.svelte';
88
import ViewButton from '$lib/view-button.svelte';
99
import { Card, Error } from '@gleich/ui';

‎src/lib/index/sections/workouts/workouts-section.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import StravaIcon from '$lib/icons/strava-icon.svelte';
44
import type { LcpResponse } from '$lib/lcp/lcp.server';
55
import { type Workout as LcpWorkout } from '$lib/lcp/workouts';
6-
import SectionLoading from '$lib/section-loading.svelte';
6+
import SectionLoading from '$lib/loading/section-loading.svelte';
77
import ViewButton from '$lib/view-button.svelte';
88
import { Error } from '@gleich/ui';
99
import Section from '../../section.svelte';

‎src/lib/loading/page-loading.svelte‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<script lang="ts">
2+
import { Logo } from '@gleich/ui';
3+
</script>
4+
5+
<div class="container">
6+
<div class="logo">
7+
<Logo />
8+
</div>
9+
</div>
10+
11+
<style>
12+
.container {
13+
display: flex;
14+
align-items: center;
15+
justify-content: center;
16+
height: calc(60vh - 10px);
17+
}
18+
19+
.logo {
20+
width: 100px;
21+
height: 100px;
22+
}
23+
</style>

src/lib/section-loading.svelte renamed to src/lib/loading/section-loading.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222

2323
.logo {
2424
width: 100px;
25-
height: auto;
25+
height: 100px;
2626
}
2727

2828
.loading {

‎src/routes/+page.server.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@ import type { Workout } from '$lib/lcp/workouts';
66
import type { PageServerLoad } from './$types';
77

88
export interface SectionData {
9-
workouts: LcpResponse<Workout[]> | null;
10-
music: LcpResponse<CacheData> | null;
11-
projects: LcpResponse<Repository[]> | null;
12-
games: LcpResponse<Game[]> | null;
9+
workouts: Promise<LcpResponse<Workout[]> | null>;
10+
music: Promise<LcpResponse<CacheData> | null>;
11+
projects: Promise<LcpResponse<Repository[]> | null>;
12+
games: Promise<LcpResponse<Game[]> | null>;
1313
}
1414

1515
export const load: PageServerLoad = async ({ fetch }: { fetch: SvelteFetch }) => ({

‎src/routes/music/playlist/[id]/+page.server.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { type SvelteFetch } from '$lib/lcp/lcp.server';
33
import type { PageServerLoad } from './$types';
44

55
export interface PlaylistData {
6-
response: AppleMusicPlaylistResponse | undefined;
6+
response: Promise<AppleMusicPlaylistResponse | undefined>;
77
}
88

99
export const load: PageServerLoad = async ({
@@ -13,5 +13,5 @@ export const load: PageServerLoad = async ({
1313
params: Record<string, string>;
1414
fetch: SvelteFetch;
1515
}) => ({
16-
response: await loadPlaylistFromLCP(params.id, 1, fetch)
16+
response: loadPlaylistFromLCP(params.id, 1, fetch)
1717
});

‎src/routes/music/playlist/[id]/+page.svelte‎

Lines changed: 65 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -6,36 +6,38 @@
66
import ViewButton from '$lib/view-button.svelte';
77
import { DynamicHead, Error } from '@gleich/ui';
88
import SpotifyIcon from '$lib/icons/spotify-icon.svelte';
9-
import { loadPlaylistFromLCP } from '$lib/lcp/applemusic';
9+
import { loadPlaylistFromLCP, type AppleMusicSong } from '$lib/lcp/applemusic';
1010
import type { PlaylistData } from './+page.server';
1111
import { onMount } from 'svelte';
12+
import PageLoading from '$lib/loading/page-loading.svelte';
13+
import { page } from '$app/state';
1214

1315
const { data }: { data: PlaylistData } = $props();
1416

15-
let tracks = $derived(data.response?.playlist?.tracks ?? []);
17+
let tracks: AppleMusicSong[] | undefined = $state();
1618
let currentPage = $state(1);
1719
let loading = $state(false);
18-
let hasMore = $derived(
19-
data.response ? tracks.length < data.response.playlist.track_count : false
20-
);
20+
let hasMore = $state(false);
2121

2222
onMount(() => {
23-
tracks = data.response?.playlist.tracks ?? [];
24-
currentPage = 1;
25-
loading = false;
26-
hasMore = data.response ? tracks.length < data.response?.playlist.track_count : false;
23+
data.response.then((resp) => {
24+
tracks = resp?.playlist.tracks ?? [];
25+
currentPage = 1;
26+
loading = false;
27+
hasMore = resp?.pagination.next != null;
28+
});
2729
});
2830

2931
async function loadNextPage() {
30-
if (!data || !data.response || loading || !hasMore) return;
32+
if (!data || !data.response || loading || !hasMore || !page.params.id) return;
3133

3234
loading = true;
3335
try {
3436
const nextPage = currentPage + 1;
35-
const next = await loadPlaylistFromLCP(data.response?.playlist.id, nextPage, fetch);
37+
const next = await loadPlaylistFromLCP(page.params.id, nextPage, fetch);
3638
const nextTracks = next?.playlist?.tracks ?? [];
3739

38-
if (nextTracks.length > 0) {
40+
if (nextTracks.length > 0 && tracks) {
3941
tracks = [...tracks, ...nextTracks];
4042
currentPage = nextPage;
4143
}
@@ -45,7 +47,7 @@
4547
return;
4648
}
4749

48-
hasMore = tracks.length < data.response.playlist.track_count;
50+
hasMore = next.pagination.next != null;
4951
} catch (e) {
5052
console.error(e);
5153
} finally {
@@ -70,59 +72,59 @@
7072

7173
<svelte:window on:scroll={onScroll} />
7274

73-
{#if data.response}
74-
<DynamicHead
75-
title={`${data.response.playlist.name} Playlist`}
76-
description={`${data.response.playlist.tracks.length} tracks`}
77-
opengraphImage={data.response.playlist?.tracks[0].album_art_url != null
78-
? { url: data.response.playlist?.tracks[0].album_art_url, height: '600', width: '600' }
79-
: undefined}
80-
/>
81-
{:else}
82-
<DynamicHead title="404 Not found" description="Playlist Not Found" />
83-
{/if}
84-
85-
{#if data.response}
86-
<div class="header">
87-
<div class="header-info">
88-
<h2>{data.response.playlist.name} Playlist</h2>
89-
<div class="stats">
90-
<p>Last updated <Since time={data.response.playlist.last_modified} /></p>
91-
<p>
92-
{data.response.playlist.track_count} songs - {renderDuration(
93-
data.response.playlist.duration_in_millis / 1000
94-
)}
95-
</p>
75+
{#await data.response}
76+
<PageLoading />
77+
{:then response}
78+
{#if response}
79+
<DynamicHead
80+
title={`${response.playlist.name} Playlist`}
81+
description={`${response.playlist.tracks.length} tracks`}
82+
opengraphImage={response.playlist?.tracks[0].album_art_url != null
83+
? { url: response.playlist?.tracks[0].album_art_url, height: '600', width: '600' }
84+
: undefined}
85+
/>
86+
<div class="header">
87+
<div class="header-info">
88+
<h2>{response.playlist.name} Playlist</h2>
89+
<div class="stats">
90+
<p>Last updated <Since time={response.playlist.last_modified} /></p>
91+
<p>
92+
{response.playlist.track_count} songs - {renderDuration(
93+
response.playlist.duration_in_millis / 1000
94+
)}
95+
</p>
96+
</div>
97+
</div>
98+
<div class="view-on-buttons">
99+
<a
100+
class="view-on-button"
101+
href={`https://open.spotify.com/playlist/${response.playlist.spotify_id}`}
102+
target="_blank"
103+
>
104+
<ViewButton on="Spotify" icon={SpotifyIcon} iconPaddingBottom="1px" iconColor="#24db68" />
105+
</a>
106+
<a class="view-on-button" href={response.playlist.url} target="_blank">
107+
<ViewButton
108+
on="Apple Music"
109+
icon={AppleMusicIcon}
110+
iconPaddingBottom="0.5px"
111+
iconColor="#fb455d"
112+
/>
113+
</a>
96114
</div>
97115
</div>
98-
<div class="view-on-buttons">
99-
<a
100-
class="view-on-button"
101-
href={`https://open.spotify.com/playlist/${data.response.playlist.spotify_id}`}
102-
target="_blank"
103-
>
104-
<ViewButton on="Spotify" icon={SpotifyIcon} iconPaddingBottom="1px" iconColor="#24db68" />
105-
</a>
106-
<a class="view-on-button" href={data.response.playlist.url} target="_blank">
107-
<ViewButton
108-
on="Apple Music"
109-
icon={AppleMusicIcon}
110-
iconPaddingBottom="0.5px"
111-
iconColor="#fb455d"
112-
/>
113-
</a>
116+
<div class="songs">
117+
{#each tracks as song (song)}
118+
<div class="song">
119+
<Song {song} />
120+
</div>
121+
{/each}
114122
</div>
115-
</div>
116-
<div class="songs">
117-
{#each tracks as song (song)}
118-
<div class="song">
119-
<Song {song} />
120-
</div>
121-
{/each}
122-
</div>
123-
{:else}
124-
<Error msg="404: Playlist not found" />
125-
{/if}
123+
{:else}
124+
<DynamicHead title="404 Not found" description="Playlist Not Found" />
125+
<Error msg="404: Playlist Not Found" />
126+
{/if}
127+
{/await}
126128

127129
<style>
128130
.header {

‎src/routes/workouts/+page.server.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@ import type { Workout } from '$lib/lcp/workouts';
55
import type { PageServerLoad } from './$types';
66

77
export interface WorkoutData {
8-
workouts: LcpResponse<Workout[]> | null;
8+
workouts: Promise<LcpResponse<Workout[]> | null>;
99
}
1010

1111
export const load: PageServerLoad = async ({ fetch }: { fetch: SvelteFetch }) => ({
12-
workouts: await loadFromLCP(Cache.Workouts, fetch)
12+
workouts: loadFromLCP(Cache.Workouts, fetch)
1313
});

0 commit comments

Comments
 (0)