a strange phenomenon with @ui.page('/')

[zhangguolin333]

Question

I have encountered a peculiar issue in my application scenario. When the app runs, it displays a blank page. For instance, in the simulated scenario within my refresh_datas method, there is a time-consuming operation, and this blank page persists until the refresh_datas is completed. Therefore, I need to show a prompt ('Please wait, data is loading...') on the initially blank page to enhance the user experience while waiting, so they don't have to stare at an empty page without knowing what's happening. How can I achieve this?

import ctypes
import time

import pandas as pd
from nicegui import ui

data = pd.DataFrame({'A': range(1, 11), 'B': range(11, 21), 'C': range(21, 31), 'D': range(31, 41), 'E': range(41, 51), 'F': range(51, 61)})
table_data = data.apply(lambda x: x ** 2)


class Table_Demo(object):
    def __init__(self, table_div):
        self.table_container = table_div
        self.table = None

    def init_table(self):
        self.table_container.clear()
        with self.table_container:
            self.table = ui.table.from_pandas(table_data, title='TABLE TEST', pagination=10)

    def refresh_datas(self):  # simulate a scenario
        time.sleep(6)
        data = pd.DataFrame({'A': range(1, 2), 'B': range(2, 3), 'C': range(3, 4), 'D': range(4, 5), 'E': range(5, 6), 'F': range(6, 7)})
        table_data = data.apply(lambda x: x ** 2)
        self.table._props["rows"] = table_data.to_dict('records')


def get_screen_size():
    try:
        user32 = ctypes.windll.user32
        screenWidth = user32.GetSystemMetrics(0)  # 0 for width
        screenHeight = user32.GetSystemMetrics(1)  # 1 for height
    except (OSError, RuntimeError) as _e:
        screenWidth, screenHeight = 1280, 720  # default value
    return screenWidth, screenHeight


def main():
    screen_width, screen_height = get_screen_size()

    @ui.page('/')
    def main_page():
        lb = ui.label('Please wait, data is loading...').classes('text-center')
        # create a container for table
        table_container = ui.element('div').props('class=custom-table').classes('w-full h-full').style('width: calc(100% - 5px);')
        status_Table = Table_Demo(table_div=table_container)

        status_Table.init_table()
        status_Table.refresh_datas()
        lb.delete()

    ui.run(title='Proj V-0.1', port=8086, reload=False, native=True, reconnect_timeout=5.0, window_size=(screen_width, screen_height - 40))


if __name__ == "__main__":
    main()

[python-and-fiction]

Why do you do this in index page?

[python-and-fiction]

Don't use sleep or any time-consuming method in main thread.

[rodja]

see https://github.com/zauberzeug/nicegui/wiki/FAQs#why-is-my-long-running-function-blocking-ui-updates

[zhangguolin333]

Why does a blank page appear first, rendering nothing? I just want a guide to be displayed, which would prompt me on what to do next. I still don't quite understand how to achieve my goal. Please run my example, and you'll see what I'm trying to do.

[python-and-fiction]

As I said, Don't use sleep or any time-consuming method in main thread.
Only create ui element in main page.

[zhangguolin333]

okay, you are right, but how can i prevent that fleeting white screen from appearing so quickly before the spinner loading is shown? it looks really bad.

import asyncio
from nicegui import ui
import pandas as pd
from concurrent.futures import ProcessPoolExecutor


class MainApp:
    def __init__(self):
        self.data = None
        self.loading = True
        self.loading_container = None
        self.executor = ProcessPoolExecutor(max_workers=1)

    @staticmethod
    def preprocess_data():
        print("Preprocessing data...")
        data = pd.DataFrame({'A': range(1, 1001), 'B': range(1001, 2001),
                             'C': range(2001, 3001), 'D': range(3001, 4001),
                             'E': range(4001, 5001), 'F': range(5001, 6001)})
        processed_data = data.apply(lambda x: x ** 2)
        return processed_data

    async def load_data(self):
        self.loading = True
        try:
            self.data = await asyncio.get_event_loop().run_in_executor(self.executor, self.preprocess_data)
        finally:
            self.loading = False

    def create_ui(self):
        self.loading_container = ui.row().classes('w-full h-screen items-center justify-center')
        with self.loading_container:
            with ui.column().classes('items-center'):
                ui.label("Loading data...").classes("text-4xl")
                ui.spinner(type='ios', size='xxl')

        table_container = ui.element()

        async def update_ui():
            while self.loading:
                await asyncio.sleep(0.1)
            self.loading_container.clear()
            self.loading_container.delete()
            with table_container:
                ui.table.from_pandas(self.data.head(), title='Demo Table')

        ui.timer(0.1, update_ui, once=True)


def main():
    main_app = MainApp()

    @ui.page('/')
    async def main_page():
        main_app.create_ui()
        await main_app.load_data()

    ui.run(title="NiceGUI Multiprocessing Example", port=8080, native=True, window_size=(1280, 720))


if __name__ in {"__main__", "__mp_main__"}:
    main()