Add a splash screen prior full start up in native mode

[brnjak-dominik]

Hello guys,

first of all huge thanks to the NiceGUI Team - never enjoyed building applications this much! You guys nailed it with FastAPI and features like cpu/io bound stuff ... makes my life so much easier!
I am more on the backend side of things - but as i am building a application for different API-Requests I searched for a possibility to add an GIF/JPG/PNG as a splash screen while the application is loading.

Research led me right to the pyinstaller feature "pyi_splash" - but as of now the picture stays in the front untli the application is closed.
Have no control over the loading screen - plus it is not possible to show a GIF for example.

It would be more convenient to have control within the application, like PyQt5.

So in ui.run() - would it be possible to do something like this:

if native is True:
    if splash_screen is True and splash_screen_path not Empty:
        start_splash
        res = await do...ui.run()
        stop_splash
    else:
        do...ui.run()

Thanks again for all of your work!

[rodja]

Would something like #2429 (comment) work for you?

[atticus-lv]

I notice that the pywebview has provide a splash screen method
https://gist.github.com/RxoMTH/b48e591045c6accf40a6a709c438b5e5
may be this can be add to the native mode?

[falkoschindler]

This code snippet implements a splash screen using two windows. NiceGUI's native mode could provide something similar, even though it might be tricky to implement because it currently supports one window only and we would need to find an intuitive API to define the content of the splash screen.

It might be easier to simply show a fullscreen image on the main page and hide it once the app has finished loading in the background.

[brnjak-dominik]

So in all of my Applications,I use a virtual env and build in to a --dir to reduce loading times as much as possible.

However, on device with smaller CPUs and RAM it takes a while that the window shows up.

So one approach would be to start a loading Screen in a different thread, await the app.on_connect() and then close it.(That works but is complicated)

But I thought it would be nice and more convinient to define it in the application itself.

[falkoschindler]

Welcome back, @brnjak-dominik!
Have you looked into #2429 (comment) like @rodja suggested?

[brnjak-dominik]

Thats not what I am looking for, unfortunately.

What I mean/would want to have is exactly this:

https://gist.github.com/RxoMTH/b48e591045c6accf40a6a709c438b5e5

import time
import webview

class API:
  
    def __init__(self):
        self.splash_screen = None
        self.main_window = None        

    def splash_screen_show(self):
        self.splash_screen.show()

    def main_window_show(self):
        time.sleep(3)
        self.main_window.show()
        self.splash_screen.destroy()

api = API()

splash_html = '''<h1>Splash screen</h1>
<script>
  window.addEventListener('pywebviewready', function() {
    pywebview.api.splash_screen_show();
  })
</script>'''
api.splash_screen = webview.create_window(
    'Splash screen', html=splash_html, hidden=True, js_api=api,
    frameless=True, easy_drag=False, width=220, height=10
)

window_html = '''<h1>Main window</h1>
<script>
  window.addEventListener('pywebviewready', function() {
    pywebview.api.main_window_show();
  })
</script>'''
api.main_window = webview.create_window(
    'Main window', html=window_html, hidden=True, js_api=api
)

webview.start()

Will try to implement it myself, by modifying the backend of the NiceGui package itself. Let's see if I can achieve something.

[BlankAdventure]

Would something like this be helpful? I use this when I want to block the UI during long-running operations:

@ui.page('/')
async def index():

    async def slow():
        overlay.set_visibility(True)
        await asyncio.sleep(5)
        overlay.set_visibility(False)
    
    ui.label('something obscured in the background')
    # Decorate this element as needed:
    with ui.element('div').style(('position: fixed; display: block; width: 100%; height: 100%;'
                                  'top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5);'
                                  'z-index: 2; cursor: pointer;')) as overlay:
        with ui.element('div').classes("h-screen flex items-center justify-center"):
            ui.label('Please be patient!').style(
                "font-size: 50px; color: white;")

    app.on_connect(slow)

ui.run()

[Leocrydis]

@brnjak-dominik this worked for me, this is for my own native app. let me know if this works,

main.py

from nicegui import ui, app
from app.startup import startup

try:
    import pyi_splash
except ImportError:
    pyi_splash = None

app.on_startup(startup)

# Close the splash screen after the startup function is called
@app.on_startup
def close_splash():
    if pyi_splash and pyi_splash.is_alive():
        pyi_splash.close()

@app.on_shutdown
def shutdown():
    print("Shutting down the server...")
    app.shutdown()

ui.run(native=True, reload=False, port=8080, title="Label Printer", favicon="🏷️")