Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

doc: Improve documentation for the infiniteHandler #12

Open
dennismphil opened this issue Jul 25, 2022 · 3 comments
Open

doc: Improve documentation for the infiniteHandler #12

dennismphil opened this issue Jul 25, 2022 · 3 comments
Assignees
@jonasgeiler
Labels
question Further information is requested

Comments

@dennismphil
Copy link

dennismphil commented Jul 25, 2022 •
edited
Loading

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>
@dennismphil dennismphil changed the title Improve Documentation for the infiniteHandler doc: Improve documentation for the infiniteHandler Jul 25, 2022
@jonasgeiler
Copy link
Owner

jonasgeiler commented Jul 26, 2022 •
edited
Loading

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!

@jonasgeiler jonasgeiler transferred this issue from jonasgeiler/svelte-tiny-virtual-list Jul 26, 2022
@dennismphil
Copy link
Author

dennismphil commented Jul 26, 2022 •
edited
Loading

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
Copy link

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.

@jonasgeiler jonasgeiler added the question Further information is requested label Feb 12, 2024
@jonasgeiler jonasgeiler self-assigned this Feb 12, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@jonasgeiler jonasgeiler

Labels
question Further information is requested
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@dennismphil @jonasgeiler @cassepipe