Page Events

As of version 0.1.2 pages support three events:

  • click - fires when page is clicked
  • visibilitychange - fires when the page gains or loses visibility
  • page_ready - fires after a page is ready with an established websocket connection

In the example below, page_ready is used to load a page with 3,000 Div elements in a staggered manner in order to improve the user experience.

Try the '/stagger' route and see how it compares to the default.

import justpy as jp
import asyncio


async def page_ready_div(self, msg):
    for i in range(1,3001):
        jp.Div(text=f'Div {i}', a=self.d, classes='border m-2 p-2 text-xs')
        if i % 100 == 0:
            await self.update()
            await asyncio.sleep(0.25)


@jp.SetRoute('/stagger')
def loading_page_stagger_test():
    wp = jp.WebPage()
    wp.on('page_ready', page_ready_div)
    wp.d = jp.Div(classes='flex flex-wrap', a=wp)
    return wp


def loading_page_no_stagger():
    wp = jp.WebPage()
    wp.d = jp.Div(classes='flex flex-wrap', a=wp)
    for i in range(1, 3001):
        jp.Div(text=f'Div {i}', a=wp.d, classes='border m-2 p-2 text-xs')
    return wp

jp.justpy(loading_page_no_stagger)