doc: Improve documentation for the `infiniteHandler`

[dennismphil]

This library is fantastic. Thank you for building this.

I thought I would write a suggestion to make it explicit the infiniteHandler working. I ran into an issue where I awaited for a promise inside the infiniteHandler and the scroll bar went into a scroll loop. It took hours of debugging to understand that we should not be awaiting inside the infiniteHandler and must return immediately. Hope will save some time for a future developer.

<script>
function infiniteHandler({ detail: { loaded, complete } }) {
    // ---------------------------------------------------
    // --  NOTE:  There is no `await` for this promise  --
    // ---------------------------------------------------
    fetch(`${api}&page=${page}`)
      .then(response => response.json())
      .then(data => {
          ...
    });
}
</script>

<VirtualList height={400} itemSize={42} itemCount={list.length}>
    ...            
    <div slot="footer">
        <InfiniteLoading on:infinite={infiniteHandler} />
    </div>
</VirtualList>

[jonasgeiler]

Thank you for the suggestions!

The thing is: You should never use async/await in svelte's event handlers. This is a limitation that neither svelte or I have control over. Event handlers should always be synchronous, otherwise the Promises will be ignored somewhere down the call stack. For example, you also can't use an asynchronous function for element.addEventListener and other svelte events, like on:click.

On the other hand, you ran into a scroll loop, which shouldn't happen, so I might look into this issue. That's all handled by svelte-infinite-loading tho, so I will transfer this issue.

Thanks, again!

[dennismphil]

Thank you for the quick response and for the comment about do not await in the event handlers. 

I attempted to record my screen. However, now I am unable to replicate this issue after giving an async handler which is awaiting for a promise to resolve. 

The issue I was seeing was after the scroll to the bottom, the spinner appears and then the data keeps on loading and the spinner keeps on appearing, it never scrolls to the top where the last previous data fetch was done. If I manually scroll up, the data fetch stops. Earlier, it stopped the continuous data fetch after I removed the await and all started working exactly as described.

Again, I am now unable to reproduce this issue. So feel free to close this as well. Thanks again.

[cassepipe]

The thing is: You should never use async/await in svelte's event handlers. This is a limitation that neither svelte or I have control over. Event handlers should always be synchronous, otherwise the Promises will be ignored somewhere down the call stack. For example, you also can't use an asynchronous function for element.addEventListener and other svelte events, like on:click.

I was just passing by and I read your comment that piqued my interest. I am learning webdev and I have seen no mention of the fact that your event handlers should not be asynchronous. Would you be kind enough to provide with some documentation about it or care to explain it to me if you feel inspired ? My searches turned up and empty and couldn't even find a relevant explanation on SO.