Infinite scroll example errors

[psy0rz]

Description

this example works: https://github.com/zauberzeug/nicegui/blob/main/examples/infinite_scroll/main.py

however when you leave the page and goto another you get this:

JavaScript did not respond within 1.0 s
Traceback (most recent call last):
  File "/usr/lib/python3.10/asyncio/locks.py", line 214, in wait
    await fut
asyncio.exceptions.CancelledError

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
  File "/usr/lib/python3.10/asyncio/tasks.py", line 456, in wait_for
    return fut.result()
asyncio.exceptions.CancelledError

The above exception was the direct cause of the following exception:

Traceback (most recent call last):
  File "/home/psy/meowton/src/venv/lib/python3.10/site-packages/nicegui/javascript_request.py", line 26, in __await__
    yield from asyncio.wait_for(self._event.wait(), self.timeout).__await__()
  File "/usr/lib/python3.10/asyncio/tasks.py", line 458, in wait_for
    raise exceptions.TimeoutError() from exc
asyncio.exceptions.TimeoutError

The above exception was the direct cause of the following exception:

[falkoschindler]

Thanks for pointing this out, @psy0rz! We fixed it by explicitly handling the timeout.

[psy0rz]

aweome thanks!! nicegui is the best :)

[psy0rz]

well now it works correctly, but on closer inspection: the timer runs on the server and send the javascript code to the client (browser), which in turn return the results.

this means that there will be a bunch of websocket messages 10 times per second, even if the user is not scrolling.

cant we do better? perhaps some javascript promise that gets resolved only when the user scrolls down enough to trigger additional content?

[falkoschindler]

Well, you're right. The current implementation might be a proof of concept, but not be very efficient.

Here's a rough idea how we could rewrite it using an intersection observer:

ui.add_head_html(r'''
<script>
document.addEventListener('DOMContentLoaded', (event) => {
    new IntersectionObserver(entries => emitEvent("bottom")).observe(document.querySelector('.footer'));
});
</script>
''')

def load_more():
    with images:
        for _ in range(10):
            ui.image(f'https://picsum.photos/640/360?{time.time()}').classes('w-32')

with ui.column() as images:
    load_more()
    ui.on('bottom', load_more)
ui.element().classes('footer')

I just don't like the initial call to load_more() and that we need to load multiple images so that the footer moves out of the viewport. Otherwise there won't be any intersection to observe. And we need a container for the image so that the footer remains below them.

I wonder if there's an easier way to achieve the same result...

[psy0rz]

yes i suspected this would be one of those things that can be done, but will get complex very quickly :)

for now i'm fine with using a timer of 1 second for my application, but it would be nice if the example would be "perfect" in the future.