Binding variable to the submit button of the form and in event handlers waiting for the DOM to update with tick.

src/lib/components/pagination/index.svelte

@@ -48,9 +48,9 @@
 		<p>Per-page:</p>
 		<Listbox
 			class="list-box"
-			value={$boredState?.search?.pageSize || 10}
+			value={pageSize || 10}
 			on:change={(e) => {
-				dispatch('update', { pageSize: e.detail, page });
+				dispatch('perPageEvent', { pageSize: e.detail, page });
 			}}
 			let:open
 		>

src/lib/components/search/textSearch/index.svelte

@@ -1,13 +1,36 @@
 <script lang="ts">
+	import { tick } from 'svelte';
+	import type { ActionData, PageData } from './$types';
 	import { fade } from 'svelte/transition';
 	import { Disclosure, DisclosureButton, DisclosurePanel } from '@rgossiaux/svelte-headlessui';
 	import { ChevronRightIcon } from '@rgossiaux/svelte-heroicons/solid';
 	import { boredState } from '$lib/stores/boredState';
 	import AdvancedSearch from '$lib/components/search/advancedSearch/index.svelte';
+	import { applyAction, enhance } from '$app/forms';
+	import { gameStore } from '$root/lib/stores/gameSearchStore';
+	import { toast } from '../../toast/toast';
+	import Pagination from '$lib/components/pagination/index.svelte';
+	import { ToastType } from '$root/lib/types';
+
+	export let data: PageData;
+	console.log('search page data', data);
+	export let form: ActionData;
+	console.log('search page form', form);
 
 	export let showButton: boolean = false;
 	export let advancedSearch: boolean = false;
-	export let form: ActionData;
+	// export let form: ActionData;
+	let submitButton: HTMLElement;
+	let pageSize = 10;
+	console.log('Form data page', +form?.data?.page);
+	let page = +form?.data?.page || 1;
+	$: skip = (page - 1) * pageSize;
+	console.log({ skip });
+	let totalItems = form?.totalCount || data?.totalCount || 0;
+	console.log({ pageSize });
+	console.log({ page });
+	console.log({ totalItems });
+	$: console.log('submit button', submitButton);
 
 	let submitting = $boredState?.loading;
 	let name = form?.name || '';
@@ -15,8 +38,67 @@
 	if (form?.error) {
 		disclosureOpen = true;
 	}
+
+	async function handleNextPageEvent(event: CustomEvent) {
+		console.log('Next page called', event.detail);
+		console.log('Current page: ', page);
+		if (+event?.detail?.page === page + 1) {
+			console.log('Page equals plus one');
+			page += 1;
+		}
+		// skip = (page - 1) * pageSize;
+		await tick();
+		console.log('New Page Value', page);
+		console.log('New Skip value', skip);
+		console.log('New skip value DOM: ', document.getElementById('skip')?.getAttribute('value'));
+		submitButton.click();
+	}
+
+	async function handlePerPageEvent(event: CustomEvent) {
+		console.log('Per Page Event called', event.detail);
+		page = 1;
+		pageSize = event.detail.pageSize;
+		await tick();
+		console.log('New limit value DOM: ', document.getElementById('limit')?.getAttribute('value'));
+		submitButton.click();
+	}
 </script>
 
+<form
+	id="search-form"
+	action="/search"
+	method="post"
+	use:enhance={({ data }) => {
+		gameStore.removeAll();
+		// data.append('limit', pageSize.toString());
+		// data.append('skip', Math.floor(page * pageSize).toString());
+		boredState.update((n) => ({ ...n, loading: true }));
+		return async ({ result }) => {
+			boredState.update((n) => ({ ...n, loading: false }));
+			console.log(result);
+			// `result` is an `ActionResult` object
+			if (result.type === 'error') {
+				toast.send('Error!', { duration: 3000, type: ToastType.ERROR, dismissible: true });
+				await applyAction(result);
+			} else if (result.type === 'success') {
+				gameStore.removeAll();
+				gameStore.addAll(result?.data?.games);
+				// totalItems = result?.data?.totalCount;
+				console.log(`Frontend result search enhance: ${JSON.stringify(result)}`);
+				totalItems = result?.data?.totalCount;
+				// skip = result?.data?.skip || 0;
+				// page = skip / pageSize || 0;
+				// console.log('enhance', page, skip, totalItems);
+				toast.send('Sucess!', { duration: 3000, type: ToastType.INFO, dismissible: true });
+				await applyAction(result);
+			} else {
+				await applyAction(result);
+			}
+		};
+	}}
+>
+	<input id="skip" type="hidden" name="skip" bind:value={skip} />
+	<input id="limit" type="hidden" name="limit" bind:value={pageSize} />
 	<div class="search">
 		<fieldset class="text-search" aria-busy={submitting} disabled={submitting}>
 			<label for="name">
@@ -58,9 +140,30 @@
 			</Disclosure>
 		{/if}
 	</div>
-{#if showButton}
+	<!-- {#if showButton} -->
-	<button id="search-submit" class="btn" type="submit" disabled={submitting}>Submit</button>
+	<button
-{/if}
+		id="search-submit"
+		class="btn"
+		type="submit"
+		disabled={submitting}
+		bind:this={submitButton}
+	>
+		Submit
+	</button>
+	<!-- {/if} -->
+</form>
+
+<Pagination
+	{pageSize}
+	{page}
+	{totalItems}
+	forwardText="Next"
+	backwardText="Prev"
+	pageSizes={[10, 25, 50, 100]}
+	on:nextPageEvent={handleNextPageEvent}
+	on:previousPageEvent={(event) => console.log('Prev page called', event)}
+	on:perPageEvent={handlePerPageEvent}
+/>
 
 <style lang="scss">
 	.search {

src/routes/+page.svelte

@@ -17,6 +17,7 @@
 
 	export let data: PageData;
 	export let form: ActionData;
+	let submitButton: HTMLElement;
 	console.log('form routesss', form);
 	console.log('Formed data:', JSON.stringify(data));
 
@@ -118,7 +119,7 @@
 			};
 		}}
 	>
-		<TextSearch showButton advancedSearch {form} />
+		<TextSearch showButton advancedSearch {submitButton} {form} />
 	</form>
 	<section>
 		<p>Or pick a random game!</p>

src/routes/search/+page.svelte

@@ -28,6 +28,7 @@
 	console.log({ totalItems });
 	let submitting = $boredState?.loading;
 	let numberOfGameSkeleton = 1;
+	let submitButton: HTMLElement;
 	console.log('Search page total count: ', totalItems);
 
 	$: if (data?.games) {
@@ -73,53 +74,18 @@
 		}
 		console.log('New page value: ', page);
 		console.log('New skip value: ', skip);
-		document.getElementById('skip')?.setAttribute('value', `${page * pageSize}`);
+		// document.getElementById('skip')?.setAttribute('value', `${page * pageSize}`);
 		console.log('New skip value DOM: ', document.getElementById('skip')?.getAttribute('value'));
-		document.getElementById('search-submit')?.click();
+		submitButton.click();
+		// document.getElementById('search-submit')?.click();
 	}
 </script>
 
 <div class="game-search">
-	{skip}
+	<TextSearch showButton advancedSearch />
-	<form
-		id="search-form"
-		action="/search"
-		method="post"
-		use:enhance={({ data }) => {
-			gameStore.removeAll();
-			// data.append('limit', pageSize.toString());
-			// data.append('skip', Math.floor(page * pageSize).toString());
-			boredState.update((n) => ({ ...n, loading: true }));
-			return async ({ result }) => {
-				boredState.update((n) => ({ ...n, loading: false }));
-				console.log(result);
-				// `result` is an `ActionResult` object
-				if (result.type === 'error') {
-					toast.send('Error!', { duration: 3000, type: ToastType.ERROR, dismissible: true });
-					await applyAction(result);
-				} else if (result.type === 'success') {
-					gameStore.removeAll();
-					gameStore.addAll(result?.data?.games);
-					// totalItems = result?.data?.totalCount;
-					console.log(`Frontend result search enhance: ${JSON.stringify(result)}`);
-					totalItems = result?.data?.totalCount;
-					// skip = result?.data?.skip || 0;
-					// page = skip / pageSize || 0;
-					// console.log('enhance', page, skip, totalItems);
-					toast.send('Sucess!', { duration: 3000, type: ToastType.INFO, dismissible: true });
-					await applyAction(result);
-				} else {
-					await applyAction(result);
-				}
-			};
-		}}
-	>
-		<input id="skip" type="hidden" name="skip" value={skip} />
-		<input id="limit" type="hidden" name="limit" value={pageSize} />
-		<TextSearch showButton advancedSearch {form} />
-	</form>
 </div>
 
+{`Length: ${$gameStore?.length}`}
 {#if $gameStore?.length > 0}
 	<div class="games">
 		<h1>Games Found:</h1>
@@ -132,17 +98,6 @@
 				/>
 			{/each}
 		</div>
-		<Pagination
-			{pageSize}
-			{page}
-			{totalItems}
-			forwardText="Next"
-			backwardText="Prev"
-			pageSizes={[10, 25, 50, 100]}
-			on:nextPageEvent={handleNextPageEvent}
-			on:previousPageEvent={(event) => console.log('Prev page called', event)}
-			on:perPageEvent={(event) => console.log('Per page called', event)}
-		/>
 	</div>
 {:else if form && form?.status && form.status !== 200}
 	<h1>There was an error searching for games!</h1>