granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: migrate components to TanStack Query v6

Browse source 
- Migrate JobSkillSelectionSidebar to use createInfiniteQuery with jobQueries.skills()
- Migrate SearchContent to use createInfiniteQuery with searchQueries
- Migrate user profile page ([username]/+page.svelte) to use createInfiniteQuery with SSR
- Migrate teams explore page to use createInfiniteQuery with partyQueries.list()

All components now use:
- TanStack Query v6 infinite query pattern
- Debounced search (debounce the value, not the query)
- IsInViewport from runed for infinite scroll detection
- Proper loading, error, and empty states
- Type-safe query options from query factories

Co-Authored-By: Justin Edmund <justin@jedmund.com>
This commit is contained in:
Devin AI 2025-11-29 08:52:32 +00:00
parent 5764161803
commit f520457e28
4 changed files with 506 additions and 298 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

181
src/lib/components/sidebar/JobSkillSelectionSidebar.svelte
View file

@ -1,15 +1,16 @@
<svelte:options runes={true} />
<script lang="ts">
import { createInfiniteQuery } from '@tanstack/svelte-query'
import type { Job, JobSkill } from '$lib/types/api/entities'
import type { JobSkillList } from '$lib/types/api/party'
import { jobAdapter } from '$lib/api/adapters/job.adapter'
import { createInfiniteScrollResource } from '$lib/api/adapters/resources/infiniteScroll.resource.svelte'
import { jobQueries } from '$lib/api/queries/job.queries'
import JobSkillItem from '../job/JobSkillItem.svelte'
import Button from '../ui/Button.svelte'
import Input from '../ui/Input.svelte'
import Select from '../ui/Select.svelte'
import Icon from '../Icon.svelte'
import { IsInViewport } from 'runed'
import * as m from '$lib/paraglide/messages'
interface Props {
@ -41,101 +42,25 @@
{ value: 5, label: 'Base' }
]
// State
// State for filtering (local UI state, not server state)
let searchQuery = $state('')
let skillCategory = $state(-1) // -1 = All
let error = $state<string | undefined>()
let sentinelEl = $state<HTMLElement>()
let skillsResource = $state<ReturnType<typeof createInfiniteScrollResource<JobSkill>> | null>(null)
let lastSearchQuery = ''
let lastJobId: string | undefined
let lastCategory = -1
// Check if slot is locked
const slotLocked = $derived(targetSlot === 0)
const currentSkill = $derived(currentSkills[targetSlot as keyof JobSkillList])
const canSearch = $derived(Boolean(job) && !slotLocked)
// Manage resource creation and search updates
// Debounced search value for query
let debouncedSearchQuery = $state('')
let debounceTimer: ReturnType<typeof setTimeout> | undefined
function updateSearch(forceRebuild = false) {
const jobId = job?.id
const locked = slotLocked
const category = skillCategory
// Clean up if no job or locked
if (!jobId || locked) {
if (skillsResource) {
skillsResource.destroy()
skillsResource = null
}
lastJobId = undefined
lastSearchQuery = ''
lastCategory = -1
return
}
// Rebuild resource if job or category changed
const needsRebuild = forceRebuild || jobId !== lastJobId || category !== lastCategory
if (needsRebuild) {
if (skillsResource) {
skillsResource.destroy()
}
// Capture current values for the closure
const currentQuery = searchQuery
const currentCategory = category
const resource = createInfiniteScrollResource<JobSkill>({
fetcher: async (page) => {
const response = await jobAdapter.searchSkills({
query: currentQuery,
jobId,
page,
...(currentCategory >= 0 ? { filters: { group: currentCategory } } : {})
})
return response
},
threshold: 200,
debounceMs: 200
})
skillsResource = resource
lastJobId = jobId
lastSearchQuery = searchQuery
lastCategory = category
resource.load()
}
// Reload if only search query changed
else if (searchQuery !== lastSearchQuery && skillsResource) {
lastSearchQuery = searchQuery
// Need to rebuild to capture new query in closure
updateSearch(true)
}
}
// Watch for job and category changes
// Debounce search query changes
$effect(() => {
job // Track job
skillCategory // Track category
updateSearch()
})
// Watch for search query changes with debounce
$effect(() => {
const query = searchQuery // Track searchQuery
const query = searchQuery
if (debounceTimer) {
clearTimeout(debounceTimer)
}
debounceTimer = setTimeout(() => {
if (query !== lastSearchQuery) {
updateSearch()
}
debouncedSearchQuery = query
}, 300)
return () => {
@ -145,16 +70,60 @@
}
})
// Bind sentinel when ready
$effect(() => {
const sentinel = sentinelEl
const resource = skillsResource
// Check if slot is locked
const slotLocked = $derived(targetSlot === 0)
const currentSkill = $derived(currentSkills[targetSlot as keyof JobSkillList])
const canSearch = $derived(Boolean(job) && !slotLocked)
if (sentinel && resource) {
resource.bindSentinel(sentinel)
// TanStack Query v6: Use createInfiniteQuery with thunk pattern for reactivity
// Query automatically updates when job, debouncedSearchQuery, or skillCategory changes
const skillsQuery = createInfiniteQuery(() => {
const jobId = job?.id
const query = debouncedSearchQuery
const category = skillCategory
// Build filter params
const filters = category >= 0 ? { group: category } : undefined
return {
...jobQueries.skills(jobId ?? '', {
query: query || undefined,
filters
}),
// Disable query when no job or slot is locked
enabled: !!jobId && !slotLocked
}
})
// Flatten all pages into a single items array
const skills = $derived(skillsQuery.data?.pages.flatMap((page) => page.results) ?? [])
// Sentinel element for intersection observation
let sentinelEl = $state<HTMLElement>()
// Use runed's IsInViewport for viewport detection
const inViewport = new IsInViewport(() => sentinelEl, {
rootMargin: '200px'
})
// Auto-fetch next page when sentinel is visible
$effect(() => {
if (
inViewport.current &&
skillsQuery.hasNextPage &&
!skillsQuery.isFetchingNextPage &&
!skillsQuery.isLoading
) {
skillsQuery.fetchNextPage()
}
})
// Computed states
const isEmpty = $derived(skills.length === 0 && !skillsQuery.isLoading && !skillsQuery.isError)
const showSentinel = $derived(
!skillsQuery.isLoading && skillsQuery.hasNextPage && skills.length > 0
)
function handleSelectSkill(skill: JobSkill) {
// Clear any previous errors
error = undefined
@ -210,7 +179,7 @@
<div class="error-banner">
<Icon name="alert-circle" size={16} />
<p>{error}</p>
<button class="close-error" on:click={() => error = undefined}>
<button class="close-error" onclick={() => error = undefined}>
<Icon name="x" size={16} />
</button>
</div>
@ -243,44 +212,44 @@
<Icon name="briefcase" size={32} />
<p>Select a job first</p>
</div>
{:else if slotLocked}
<div class="empty-state">
<Icon name="arrow-left" size={32} />
<p>This slot cannot be changed</p>
</div>
{:else if skillsResource?.loading}
{:else if slotLocked}
<div class="empty-state">
<Icon name="arrow-left" size={32} />
<p>This slot cannot be changed</p>
</div>
{:else if skillsQuery.isLoading}
<div class="loading-state">
<Icon name="loader-2" size={32} />
<p>Loading skills...</p>
</div>
{:else if skillsResource?.error}
{:else if skillsQuery.isError}
<div class="error-state">
<Icon name="alert-circle" size={32} />
<p>{skillsResource.error.message || 'Failed to load skills'}</p>
<Button size="small" on:click={() => skillsResource?.retry()}>Retry</Button>
<p>{skillsQuery.error?.message || 'Failed to load skills'}</p>
<Button size="small" onclick={() => skillsQuery.refetch()}>Retry</Button>
</div>
{:else}
<div class="skills-list">
{#each skillsResource?.items || [] as skill (skill.id)}
{#each skills as skill (skill.id)}
<JobSkillItem
{skill}
onClick={() => handleSelectSkill(skill)}
/>
{/each}
{#if skillsResource?.isEmpty}
{#if isEmpty}
<div class="empty-state">
<Icon name="search-x" size={32} />
<p>No skills found</p>
{#if searchQuery || skillCategory >= 0}
<div class="clear-filters">
{#if searchQuery}
<Button size="small" variant="ghost" on:click={() => searchQuery = ''}>
<Button size="small" variant="ghost" onclick={() => searchQuery = ''}>
Clear search
</Button>
{/if}
{#if skillCategory >= 0}
<Button size="small" variant="ghost" on:click={() => skillCategory = -1}>
<Button size="small" variant="ghost" onclick={() => skillCategory = -1}>
Clear filter
</Button>
{/if}
@ -289,11 +258,11 @@
</div>
{/if}
{#if skillsResource?.hasMore && !skillsResource?.loadingMore}
{#if showSentinel}
<div class="load-more-sentinel" bind:this={sentinelEl}></div>
{/if}
{#if skillsResource?.loadingMore}
{#if skillsQuery.isFetchingNextPage}
<div class="loading-more">
<Icon name="loader-2" size={20} />
<span>Loading more skills...</span>

256
src/lib/components/sidebar/SearchContent.svelte
View file

@ -1,9 +1,12 @@
<svelte:options runes={true} />
<script lang="ts">
import { SearchAdapter } from '$lib/api/adapters/search.adapter'
import { createInfiniteQuery } from '@tanstack/svelte-query'
import type { SearchResult } from '$lib/api/adapters/search.adapter'
import { searchQueries, type SearchFilters } from '$lib/api/queries/search.queries'
import Button from '../ui/Button.svelte'
import Icon from '../Icon.svelte'
import { IsInViewport } from 'runed'
import { getCharacterImage, getWeaponImage, getSummonImage } from '$lib/features/database/detail/image'
interface Props {
@ -18,16 +21,10 @@
canAddMore = true
}: Props = $props()
// Search adapter
const searchAdapter = new SearchAdapter()
// Search state
// Search state (local UI state)
let searchQuery = $state('')
let searchResults = $state<SearchResult[]>([])
let isLoading = $state(false)
let currentPage = $state(1)
let totalPages = $state(1)
let hasInitialLoad = $state(false)
let debouncedSearchQuery = $state('')
let debounceTimer: ReturnType<typeof setTimeout> | undefined
// Filter state
let elementFilters = $state<number[]>([])
@ -36,6 +33,7 @@
// Refs
let searchInput: HTMLInputElement
let sentinelEl = $state<HTMLElement>()
// Constants
const elements = [
@ -67,64 +65,89 @@
{ value: 10, label: 'Katana' }
]
// Debounce search query changes
$effect(() => {
const query = searchQuery
if (debounceTimer) {
clearTimeout(debounceTimer)
}
debounceTimer = setTimeout(() => {
debouncedSearchQuery = query
}, 300)
return () => {
if (debounceTimer) {
clearTimeout(debounceTimer)
}
}
})
// Build filters object for query
const filters = $derived<SearchFilters>({
element: elementFilters.length > 0 ? elementFilters : undefined,
rarity: rarityFilters.length > 0 ? rarityFilters : undefined,
proficiency: type === 'weapon' && proficiencyFilters.length > 0 ? proficiencyFilters : undefined
})
// TanStack Query v6: Use createInfiniteQuery with thunk pattern for reactivity
// Query automatically updates when type, debouncedSearchQuery, or filters change
// Note: Type assertion needed because different search types have different query keys
// but share the same SearchPageResult structure
const searchQueryResult = createInfiniteQuery(() => {
const query = debouncedSearchQuery
const currentFilters = filters
// Select the appropriate query based on type
// All query types return the same SearchPageResult structure
switch (type) {
case 'weapon':
return searchQueries.weapons(query, currentFilters)
case 'character':
return searchQueries.characters(query, currentFilters) as unknown as ReturnType<typeof searchQueries.weapons>
case 'summon':
return searchQueries.summons(query, currentFilters) as unknown as ReturnType<typeof searchQueries.weapons>
}
})
// Flatten all pages into a single items array
const searchResults = $derived(
searchQueryResult.data?.pages.flatMap((page) => page.results) ?? []
)
// Use runed's IsInViewport for viewport detection
const inViewport = new IsInViewport(() => sentinelEl, {
rootMargin: '200px'
})
// Auto-fetch next page when sentinel is visible
$effect(() => {
if (
inViewport.current &&
searchQueryResult.hasNextPage &&
!searchQueryResult.isFetchingNextPage &&
!searchQueryResult.isLoading
) {
searchQueryResult.fetchNextPage()
}
})
// Computed states
const isEmpty = $derived(
searchResults.length === 0 && !searchQueryResult.isLoading && !searchQueryResult.isError
)
const showSentinel = $derived(
!searchQueryResult.isLoading && searchQueryResult.hasNextPage && searchResults.length > 0
)
// Focus search input on mount
$effect(() => {
if (searchInput) {
searchInput.focus()
}
// Load recent items on mount
if (!hasInitialLoad) {
hasInitialLoad = true
performSearch()
}
})
// Search when query or filters change (debounced by adapter)
$effect(() => {
if (hasInitialLoad) {
performSearch()
}
})
async function performSearch() {
isLoading = true
try {
const params = {
query: searchQuery || '',
page: currentPage,
filters: {
element: elementFilters.length > 0 ? elementFilters : undefined,
rarity: rarityFilters.length > 0 ? rarityFilters : undefined,
proficiency1: type === 'weapon' && proficiencyFilters.length > 0 ? proficiencyFilters : undefined
}
}
let response
switch (type) {
case 'weapon':
response = await searchAdapter.searchWeapons(params)
break
case 'character':
response = await searchAdapter.searchCharacters(params)
break
case 'summon':
response = await searchAdapter.searchSummons(params)
break
}
if (response) {
searchResults = response.results || []
totalPages = response.totalPages || 1
}
} catch (error) {
console.error('Search failed:', error)
searchResults = []
} finally {
isLoading = false
}
}
function handleItemClick(item: SearchResult) {
if (canAddMore) {
onAddItems([item])
@ -248,8 +271,17 @@
<!-- Results -->
<div class="results-section">
{#if isLoading}
<div class="loading">Searching...</div>
{#if searchQueryResult.isLoading}
<div class="loading">
<Icon name="loader-2" size={24} />
<span>Searching...</span>
</div>
{:else if searchQueryResult.isError}
<div class="error-state">
<Icon name="alert-circle" size={24} />
<p>{searchQueryResult.error?.message || 'Search failed'}</p>
<Button size="small" onclick={() => searchQueryResult.refetch()}>Retry</Button>
</div>
{:else if searchResults.length > 0}
<ul class="results-list">
{#each searchResults as item (item.id)}
@ -281,31 +313,24 @@
{/each}
</ul>
{#if totalPages > 1}
<div class="pagination">
<Button
variant="ghost"
size="small"
onclick={() => currentPage = Math.max(1, currentPage - 1)}
disabled={currentPage === 1}
>
Previous
</Button>
<span class="page-info">Page {currentPage} of {totalPages}</span>
<Button
variant="ghost"
size="small"
onclick={() => currentPage = Math.min(totalPages, currentPage + 1)}
disabled={currentPage === totalPages}
>
Next
</Button>
{#if showSentinel}
<div class="load-more-sentinel" bind:this={sentinelEl}></div>
{/if}
{#if searchQueryResult.isFetchingNextPage}
<div class="loading-more">
<Icon name="loader-2" size={20} />
<span>Loading more...</span>
</div>
{/if}
{:else if searchQuery.length > 0}
<div class="no-results">No results found</div>
{:else}
<div class="no-results">Start typing to search</div>
{:else if isEmpty}
<div class="no-results">
{#if searchQuery.length > 0}
No results found
{:else}
Start typing to search
{/if}
</div>
{/if}
</div>
</div>
@ -492,19 +517,58 @@
}
}
.pagination {
.loading {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
gap: $unit-2x;
margin-top: $unit-2x;
padding-top: $unit-2x;
border-top: 1px solid var(--border-primary);
gap: $unit;
.page-info {
font-size: $font-small;
color: var(--text-secondary);
:global(svg) {
animation: spin 1s linear infinite;
}
}
.error-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: $unit;
padding: $unit-3x;
color: var(--text-secondary);
:global(svg) {
color: var(--text-tertiary);
}
p {
margin: 0;
font-size: $font-regular;
}
}
.load-more-sentinel {
height: 1px;
margin-top: $unit;
}
.loading-more {
display: flex;
align-items: center;
justify-content: center;
gap: $unit;
padding: $unit-2x;
color: var(--text-secondary);
font-size: $font-regular;
:global(svg) {
animation: spin 1s linear infinite;
}
}
}
</style>
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
</style>

209
src/routes/[username]/+page.svelte
View file

@ -1,52 +1,94 @@
<script lang="ts">
import type { PageData } from './$types'
import { browser } from '$app/environment'
import InfiniteScroll from '$lib/components/InfiniteScroll.svelte'
import { createInfiniteQuery } from '@tanstack/svelte-query'
import ExploreGrid from '$lib/components/explore/ExploreGrid.svelte'
import { createInfiniteScrollResource } from '$lib/api/adapters/resources/infiniteScroll.resource.svelte'
import { userAdapter } from '$lib/api/adapters/user.adapter'
import { userQueries } from '$lib/api/queries/user.queries'
import { getAvatarSrc, getAvatarSrcSet } from '$lib/utils/avatar'
import { IsInViewport } from 'runed'
import Icon from '$lib/components/Icon.svelte'
import Button from '$lib/components/ui/Button.svelte'
const { data } = $props() as { data: PageData }
const tab = data.tab || 'teams'
const isOwner = data.isOwner || false
const tab = $derived(data.tab || 'teams')
const isOwner = $derived(data.isOwner || false)
const avatarFile = data.user?.avatar?.picture || ''
const avatarSrc = getAvatarSrc(avatarFile)
const avatarSrcSet = getAvatarSrcSet(avatarFile)
const avatarFile = $derived(data.user?.avatar?.picture || '')
const avatarSrc = $derived(getAvatarSrc(avatarFile))
const avatarSrcSet = $derived(getAvatarSrcSet(avatarFile))
// Create infinite scroll resource for profile parties
const profileResource = createInfiniteScrollResource({
fetcher: async (page) => {
if (tab === 'favorites' && isOwner) {
const response = await userAdapter.getFavorites({ page })
return {
results: response.items,
page: response.page,
total: response.total,
totalPages: response.totalPages,
perPage: response.perPage
}
// Note: Type assertion needed because favorites and parties queries have different
// result structures (items vs results) but we handle both in the items $derived
const partiesQuery = createInfiniteQuery(() => {
const isFavorites = tab === 'favorites' && isOwner
if (isFavorites) {
return {
...userQueries.favorites(),
initialData: data.items
? {
pages: [
{
items: data.items,
page: data.page || 1,
totalPages: data.totalPages,
total: data.total,
perPage: data.perPage || 20
}
],
pageParams: [1]
}
: undefined,
initialDataUpdatedAt: 0
}
return userAdapter.getProfileParties(data.user.username, page)
},
initialData: data.items,
initialPage: data.page || 1,
initialTotalPages: data.totalPages,
initialTotal: data.total,
threshold: 300,
debounceMs: 200
}
return {
...userQueries.parties(data.user?.username ?? ''),
enabled: !!data.user?.username,
initialData: data.items
? {
pages: [
{
results: data.items,
page: data.page || 1,
totalPages: data.totalPages,
total: data.total,
perPage: data.perPage || 20
}
],
pageParams: [1]
}
: undefined,
initialDataUpdatedAt: 0
} as unknown as ReturnType<typeof userQueries.favorites>
})
const items = $derived(() => {
if (!partiesQuery.data?.pages) return data.items || []
const isFavorites = tab === 'favorites' && isOwner
if (isFavorites) {
return partiesQuery.data.pages.flatMap((page) => (page as any).items ?? [])
}
return partiesQuery.data.pages.flatMap((page) => (page as any).results ?? [])
})
const isEmpty = $derived(!partiesQuery.isLoading && items().length === 0)
const showSentinel = $derived(partiesQuery.hasNextPage && !partiesQuery.isFetchingNextPage)
let sentinelEl = $state<HTMLElement>()
const inViewport = new IsInViewport(() => sentinelEl, {
rootMargin: '300px'
})
// Initialize with SSR data on client
$effect(() => {
if (browser && data.items && !profileResource.items.length) {
profileResource.initFromSSR({
items: data.items,
page: data.page || 1,
totalPages: data.totalPages,
total: data.total
})
if (
inViewport.current &&
partiesQuery.hasNextPage &&
!partiesQuery.isFetchingNextPage &&
!partiesQuery.isLoading
) {
partiesQuery.fetchNextPage()
}
})
</script>
@ -82,27 +124,43 @@
</div>
</header>
<InfiniteScroll resource={profileResource} class="profile-grid">
<ExploreGrid items={profileResource.items} />
{#if partiesQuery.isLoading}
<div class="loading">
<Icon name="loader-2" size={32} />
<p>Loading {tab}...</p>
</div>
{:else if partiesQuery.isError}
<div class="error">
<Icon name="alert-circle" size={32} />
<p>Failed to load {tab}: {partiesQuery.error?.message || 'Unknown error'}</p>
<Button size="small" onclick={() => partiesQuery.refetch()}>Retry</Button>
</div>
{:else if isEmpty}
<div class="empty">
<p>{tab === 'favorites' ? 'No favorite teams yet' : 'No teams found'}</p>
</div>
{:else}
<div class="profile-grid">
<ExploreGrid items={items()} />
{#snippet emptySnippet()}
<div class="empty">
<p>{tab === 'favorites' ? 'No favorite teams yet' : 'No teams found'}</p>
</div>
{/snippet}
{#if showSentinel}
<div class="load-more-sentinel" bind:this={sentinelEl}></div>
{/if}
{#snippet endSnippet()}
<div class="end">
<p>You've seen all {tab === 'favorites' ? 'favorites' : 'teams'}!</p>
</div>
{/snippet}
{#if partiesQuery.isFetchingNextPage}
<div class="loading-more">
<Icon name="loader-2" size={20} />
<span>Loading more...</span>
</div>
{/if}
{#snippet errorSnippet(error)}
<div class="error">
<p>Failed to load {tab}: {error.message || 'Unknown error'}</p>
</div>
{/snippet}
</InfiniteScroll>
{#if !partiesQuery.hasNextPage && items().length > 0}
<div class="end">
<p>You've seen all {tab === 'favorites' ? 'favorites' : 'teams'}!</p>
</div>
{/if}
</div>
{/if}
</section>
<style lang="scss">
@ -161,4 +219,45 @@
.error {
color: var(--text-error, #dc2626);
}
.loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: $unit;
padding: $unit-4x;
color: var(--text-secondary);
:global(svg) {
animation: spin 1s linear infinite;
}
p {
margin: 0;
}
}
.load-more-sentinel {
height: 1px;
margin-top: $unit;
}
.loading-more {
display: flex;
align-items: center;
justify-content: center;
gap: $unit;
padding: $unit-2x;
color: var(--text-secondary);
:global(svg) {
animation: spin 1s linear infinite;
}
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
</style>

158
src/routes/teams/explore/+page.svelte
View file

@ -1,35 +1,54 @@
<script lang="ts">
import type { PageData } from './$types'
import { browser } from '$app/environment'
import InfiniteScroll from '$lib/components/InfiniteScroll.svelte'
import { createInfiniteQuery } from '@tanstack/svelte-query'
import ExploreGrid from '$lib/components/explore/ExploreGrid.svelte'
import { createInfiniteScrollResource } from '$lib/api/adapters/resources/infiniteScroll.resource.svelte'
import { partyAdapter } from '$lib/api/adapters/party.adapter'
import { partyQueries } from '$lib/api/queries/party.queries'
import { IsInViewport } from 'runed'
import Icon from '$lib/components/Icon.svelte'
import Button from '$lib/components/ui/Button.svelte'
const { data } = $props() as { data: PageData }
// Create infinite scroll resource
const exploreResource = createInfiniteScrollResource({
fetcher: (page) => partyAdapter.list({ page }),
initialData: data.items,
initialPage: data.page || 1,
initialTotalPages: data.totalPages,
initialTotal: data.total,
threshold: 300,
debounceMs: 200,
maxItems: 500, // Limit for performance
debug: false // Disable debug logging
const partiesQuery = createInfiniteQuery(() => ({
...partyQueries.list(),
initialData: data.items
? {
pages: [
{
results: data.items,
page: data.page || 1,
totalPages: data.totalPages,
total: data.total,
perPage: data.perPage || 20
}
],
pageParams: [1]
}
: undefined,
initialDataUpdatedAt: 0
}))
const items = $derived(
partiesQuery.data?.pages.flatMap((page) => page.results) ?? data.items ?? []
)
const isEmpty = $derived(!partiesQuery.isLoading && items.length === 0)
const showSentinel = $derived(partiesQuery.hasNextPage && !partiesQuery.isFetchingNextPage)
let sentinelEl = $state<HTMLElement>()
const inViewport = new IsInViewport(() => sentinelEl, {
rootMargin: '300px'
})
// Initialize with SSR data on client
$effect(() => {
if (browser && data.items && !exploreResource.items.length) {
exploreResource.initFromSSR({
items: data.items,
page: data.page || 1,
totalPages: data.totalPages,
total: data.total
})
if (
inViewport.current &&
partiesQuery.hasNextPage &&
!partiesQuery.isFetchingNextPage &&
!partiesQuery.isLoading
) {
partiesQuery.fetchNextPage()
}
})
</script>
@ -39,27 +58,43 @@
<h1>Explore Teams</h1>
</header>
<InfiniteScroll resource={exploreResource} class="explore-grid">
<ExploreGrid items={exploreResource.items} />
{#if partiesQuery.isLoading}
<div class="loading">
<Icon name="loader-2" size={32} />
<p>Loading teams...</p>
</div>
{:else if partiesQuery.isError}
<div class="error">
<Icon name="alert-circle" size={32} />
<p>Failed to load teams: {partiesQuery.error?.message || 'Unknown error'}</p>
<Button size="small" onclick={() => partiesQuery.refetch()}>Retry</Button>
</div>
{:else if isEmpty}
<div class="empty">
<p>No teams found</p>
</div>
{:else}
<div class="explore-grid">
<ExploreGrid items={items} />
{#snippet emptySnippet()}
<div class="empty">
<p>No teams found</p>
</div>
{/snippet}
{#if showSentinel}
<div class="load-more-sentinel" bind:this={sentinelEl}></div>
{/if}
{#snippet endSnippet()}
<div class="end">
<p>You've reached the end of all teams!</p>
</div>
{/snippet}
{#if partiesQuery.isFetchingNextPage}
<div class="loading-more">
<Icon name="loader-2" size={20} />
<span>Loading more...</span>
</div>
{/if}
{#snippet errorSnippet(error)}
<div class="error">
<p>Failed to load teams: {error.message || 'Unknown error'}</p>
</div>
{/snippet}
</InfiniteScroll>
{#if !partiesQuery.hasNextPage && items.length > 0}
<div class="end">
<p>You've reached the end of all teams!</p>
</div>
{/if}
</div>
{/if}
</section>
<style lang="scss">
@ -89,4 +124,45 @@
.error {
color: var(--text-error, #dc2626);
}
.loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: $unit;
padding: $unit-4x;
color: var(--text-secondary);
:global(svg) {
animation: spin 1s linear infinite;
}
p {
margin: 0;
}
}
.load-more-sentinel {
height: 1px;
margin-top: $unit;
}
.loading-more {
display: flex;
align-items: center;
justify-content: center;
gap: $unit;
padding: $unit-2x;
color: var(--text-secondary);
:global(svg) {
animation: spin 1s linear infinite;
}
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
</style>