How to use Quasar's q-pull-to-refresh component in NiceGUI

[flintcreek]

Question

Is it possible to use the Quasar q-pull-to-refresh component in NiceGUI? I am able to get it on the page and it calls my discover function when pulled. The issue is that I don't see how to retrieve the "done" parameter that the refresh event is supposed to pass to the handler.

def discover(event):
    print(event)    # <-- I hoped the "done" parameter from Quasar was in "event" somewhere, but I don't see it.

with ui.element('q-pull-to-refresh').on('refresh', discover):
    ui.label('content to refresh')

[falkoschindler]

Hi @flintcreek,

The problem with the done parameter is that it is a JavaScript function that needs to be called when the refresh is completed. But it can't be serialized and sent to the Python server, so we can't handle it in Python.

But we can handle the event directly in JavaScript, emit a custom event to Python, and call done() immeditately:

with ui.element('q-pull-to-refresh').on('refresh', js_handler='(done) => { emitEvent("refresh"); done(); }'):
    label = ui.label('content to refresh')
ui.on('refresh', lambda: label.set_text('refreshed'))

The only downside is that done() is called before the data is actually refreshed, which might feel a bit weird.

[falkoschindler]

Here is a more advanced version that actually waits for the refresh to complete:

with ui.element('q-pull-to-refresh') as pull_to_refresh:
    label = ui.label('content to refresh')

pull_to_refresh.on('refresh', js_handler='''
    (done) => {
        emitEvent("refresh");
        window.refresh_complete = false;
        const interval = setInterval(() => {
            if (window.refresh_complete) {
                done();
                clearInterval(interval);
            }
        }, 100);
    }
''')

async def refresh():
    await asyncio.sleep(0.5)
    label.text = 'refreshed'
    ui.run_javascript('window.refresh_complete = true')

ui.on('refresh', refresh)

[flintcreek]

This is great! It works marvelously, and solved my problem. Thank you for the speedy solution!

-Matt