fix(frontend): auto-fill viewport on file list load
After each batch, check if the scroll container is still shorter than the viewport (scrollHeight <= clientHeight) and keep loading until the scrollbar appears or there are no more files. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
012c6f9c48
commit
70cbb45b01
@ -13,10 +13,13 @@
|
|||||||
import { selectionStore, selectionActive } from '$lib/stores/selection';
|
import { selectionStore, selectionActive } from '$lib/stores/selection';
|
||||||
import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
|
import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
|
||||||
import BulkTagEditor from '$lib/components/file/BulkTagEditor.svelte';
|
import BulkTagEditor from '$lib/components/file/BulkTagEditor.svelte';
|
||||||
|
import { tick } from 'svelte';
|
||||||
import { parseDslFilter } from '$lib/utils/dsl';
|
import { parseDslFilter } from '$lib/utils/dsl';
|
||||||
import type { File, FileCursorPage, Pool, PoolOffsetPage } from '$lib/api/types';
|
import type { File, FileCursorPage, Pool, PoolOffsetPage } from '$lib/api/types';
|
||||||
import { appSettings } from '$lib/stores/appSettings';
|
import { appSettings } from '$lib/stores/appSettings';
|
||||||
|
|
||||||
|
let scrollContainer = $state<HTMLElement | undefined>();
|
||||||
|
|
||||||
let uploader = $state<{ open: () => void } | undefined>();
|
let uploader = $state<{ open: () => void } | undefined>();
|
||||||
let confirmDeleteFiles = $state(false);
|
let confirmDeleteFiles = $state(false);
|
||||||
|
|
||||||
@ -121,6 +124,12 @@
|
|||||||
} finally {
|
} finally {
|
||||||
loading = false;
|
loading = false;
|
||||||
}
|
}
|
||||||
|
// If the loaded content doesn't fill the viewport yet (no scrollbar),
|
||||||
|
// keep loading until it does or there's nothing left.
|
||||||
|
await tick();
|
||||||
|
if (hasMore && scrollContainer && scrollContainer.scrollHeight <= scrollContainer.clientHeight) {
|
||||||
|
void loadMore();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function applyFilter(filter: string | null) {
|
function applyFilter(filter: string | null) {
|
||||||
@ -244,7 +253,7 @@
|
|||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<FileUpload bind:this={uploader} onUploaded={handleUploaded}>
|
<FileUpload bind:this={uploader} onUploaded={handleUploaded}>
|
||||||
<main>
|
<main bind:this={scrollContainer}>
|
||||||
{#if error}
|
{#if error}
|
||||||
<p class="error" role="alert">{error}</p>
|
<p class="error" role="alert">{error}</p>
|
||||||
{/if}
|
{/if}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user