Infinite scroll example errors

[psy0rz]

Infinite scroll example errors

[psy0rz]

aweome thanks!! nicegui is the best :)

[falkoschindler]

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

[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.