From f520457e283265a4b5158f90364825675041f3b2 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Sat, 29 Nov 2025 08:52:32 +0000
Subject: [PATCH] feat: migrate components to TanStack Query v6

- 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>
---
 .../sidebar/JobSkillSelectionSidebar.svelte   | 181 +++++--------
 .../components/sidebar/SearchContent.svelte   | 256 +++++++++++-------
 src/routes/[username]/+page.svelte            | 209 ++++++++++----
 src/routes/teams/explore/+page.svelte         | 158 ++++++++---
 4 files changed, 506 insertions(+), 298 deletions(-)

diff --git a/src/lib/components/sidebar/JobSkillSelectionSidebar.svelte b/src/lib/components/sidebar/JobSkillSelectionSidebar.svelte
index 6394f3e6..567a49df 100644
--- a/src/lib/components/sidebar/JobSkillSelectionSidebar.svelte
+++ b/src/lib/components/sidebar/JobSkillSelectionSidebar.svelte
@@ -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>
diff --git a/src/lib/components/sidebar/SearchContent.svelte b/src/lib/components/sidebar/SearchContent.svelte
index 3f90b732..1b195603 100644
--- a/src/lib/components/sidebar/SearchContent.svelte
+++ b/src/lib/components/sidebar/SearchContent.svelte
@@ -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>
\ No newline at end of file
+
+	@keyframes spin {
+		from { transform: rotate(0deg); }
+		to { transform: rotate(360deg); }
+	}
+</style>
diff --git a/src/routes/[username]/+page.svelte b/src/routes/[username]/+page.svelte
index aa2ee527..4174c130 100644
--- a/src/routes/[username]/+page.svelte
+++ b/src/routes/[username]/+page.svelte
@@ -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>
diff --git a/src/routes/teams/explore/+page.svelte b/src/routes/teams/explore/+page.svelte
index f59bf34a..31cd93fe 100644
--- a/src/routes/teams/explore/+page.svelte
+++ b/src/routes/teams/explore/+page.svelte
@@ -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>