CODEWITHSUNDEEP
infinite-scrollsvelte
The Cubear Guy
The Cubear Guy

Reputation: 381

svelte-tiny-virtual-list + svelte-infinite-loading crashing on page load

I have used svelte-infinite-loading, and it worked fine at first, but as the list got very long, my web app started using substantial amounts of memory, using as much as 2gb.

So, I needed to virtualize this infinite list. I used svelte-tiny-virtual-list as recommended by svelte-infinite-loading's author:

<script>
    ....

    function onInfinite({ detail }) {
        const skip = items !== undefined ? items.length : 0;
        fetchItems(skip).then((data) => {
            if (data.length === 0) {
                items = [];
                detail.complete();
                return;
            }
            if (items === undefined) items = data;
            else items = [...items, ...data];
            detail.loaded();
        });
    }

    onMount(() => {
        fetchItems(0).then((data) => {
            Items = data;
        });
    });
</script>

{#if items !== undefined}
        {#if items.length === 0}
            <p><i>No items found</i></p>
        {:else}
            <VirtualList
                itemCount={items.length}
                itemSize={200}
                height="100%">

                <div slot="item" let:index>
                    <Item
                        item={items[index]} />
                </div>

                <div slot="footer">
                    <InfiniteLoading on:infinite={onInfinite} />
                </div>
        </VirtualList>
    {/if}
{/if}

The problem comes when the page loads:

The first few items are fetched and displayed correctly, but then the page grows to abnormal lengths, then the list disappears and I get the following error:

InfiniteLoading.svelte:103 executed the callback function more than 10 times for a short time, it looks like searched a wrong scroll wrapper that doest not has fixed height or maximum height, please check it.

What have I done wrong?

Upvotes: 0

Views: 541

Answers (1)

J&#233;r&#233;mie B
J&#233;r&#233;mie B

Reputation: 11022

A VirtualList creates items until the height of the list exceed the height of the parent. It then fakes a scrollbar to select which items it should render.

Apparently, you have placed the VirtualList in a container without height/max-height and it can't determine how many items it should create.

You have to set a max-height or a height on the parent element.

Upvotes: 1

Related Questions