Server Side Pagination breaks if data empty

[VitAndrGuid]

Current Behavior

Im using the Pagination component along with tanstack query to do some server side pagination.

When changing to the next page, tanstack query sets the query data to undefined and after it finishes loading it sets to the next page, however this breaks pagination as triggers the onPageChange event with page: 0, probably because the pagination component sees that data is undefined and resets the page to 0, this makes sense for client side pagination but not so much for server side.

Tbh idk if this is a bug as this is be intended but i think some other people will face this "gotcha" aswell, so if this is a wontfix this should be documented (i can open a PR for this)

"@skeletonlabs/skeleton": "3.0.0-next.10"
"@skeletonlabs/skeleton-svelte": "1.0.0-next.18"

Expected Behavior

Current page should not be reset on data changes unless explicitely told to ? or perhaps make data a optional prop as it only makes sense for client side pagination

Steps To Reproduce

<script lang="ts">
	import { Pagination } from '@skeletonlabs/skeleton-svelte';

	let page = $state(1);
	let pageSize = $state(2);

	const mockData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

	let data = $state<number[]>(mockData);

	const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));

	const mockFetchNext = () => {
		// comment this line to fix the "bug"
		data = [];
		page = page + 1;
		delay(500).then(() => (data = mockData));
	};
</script>

<button class="btn preset-filled" onclick={mockFetchNext}>next</button>

<pre>{JSON.stringify({ data, page, pageSize })}</pre>

<Pagination bind:page bind:pageSize {data} count={data.length} />

Link to Reproduction / Stackblitz

No response

More Information

No response