Fix template search/filter UX and performance

- Add noScroll option to navigation to prevent page jumps
- Reorder empty state conditions to check search/filter first
- Remove unused parent parameter from page load function
This commit is contained in:
Torsten Dittmann
2025-05-28 15:26:25 +02:00
parent 65f950db75
commit aecda2c84a
2 changed files with 14 additions and 10 deletions
@@ -48,13 +48,17 @@
}
target.searchParams.delete('page');
offset = 0;
goto(target.toString());
goto(target.toString(), {
noScroll: true
});
}
function clearSearch() {
const target = new URL(page.url);
target.search = '';
goto(target.toString());
goto(target.toString(), {
noScroll: true
});
}
function getBaseRuntimes(runtimes: Models.TemplateRuntime[]): Models.TemplateRuntime[] {
@@ -141,7 +145,13 @@
</Card>
</Layout.Stack>
<Layout.Stack gap="l">
{#if data.templates?.length > 0}
{#if data?.search && data.templates.length === 0}
<EmptySearch hidePagination search={data.search}>
<Button secondary on:click={clearSearch}>Clear search</Button>
</EmptySearch>
{:else if data?.filter && data.templates.length === 0}
<EmptyFilter resource="templates"></EmptyFilter>
{:else}
<Paginator items={data.templates} limit={12} hidePages={false} hasLimit bind:offset>
{#snippet children(paginatedItems: typeof data.templates)}
<Layout.Grid columns={2} columnsXL={3} columnsXS={1}>
@@ -225,12 +235,6 @@
</Layout.Grid>
{/snippet}
</Paginator>
{:else if data?.search}
<EmptySearch hidePagination search={data.search}>
<Button secondary on:click={clearSearch}>Clear search</Button>
</EmptySearch>
{:else if data?.filter}
<EmptyFilter resource="templates"></EmptyFilter>
{/if}
</Layout.Stack>
</Layout.GridFraction>
@@ -3,7 +3,7 @@ import { getSearch } from '$lib/helpers/load';
import { sdk } from '$lib/stores/sdk';
import type { PageLoad } from './$types';
export const load: PageLoad = async ({ url, depends, parent, params }) => {
export const load: PageLoad = async ({ url, depends, params }) => {
depends(Dependencies.FUNCTIONS);
const search = getSearch(url);