Request for an example of a multilingual application

[Nurgak]

I would like to better understand better how to make an application multilingual using NiceGUI. Understandably, it's already a solved problem and natively supported in Python via gettext.

I have successfully generated and edited all the necessary .po and .mo language files. I can select the language from a drop-down in NiceGUI. The selected language setting is saved for the user using the NiceGUI storage function (via binding), so it will persist over reloads and navigation. However, the last bit is missing: when the desired language is selected the page language does not change, it requires a reload.

For the life of me, I could not figure out how to reload a page using NiceGUI functions. I thought perhaps I was doing things wrong, maybe NiceGUI has the capability of reloading only the text, so a page refresh would not be necessary? Of course, I don't mind a full page refresh, this is even expected.

Now I don't know how to proceed. My application is correctly translated, the user can select the language, but the page behavior is incorrect: the page should immediately show the content in the selected language (auto reload), instead of requiring a press on the browser reload button.

It would be nice to have an example showing how to create a multilingual page using native Python tools and NiceGUI.

[evnchn]

Short-term solution (slower language switch): Trigger browser reload by: https://nicegui.io/documentation/navigate#navigation_functions

Long-term solution (faster language switch, but more complicated): Put everything inside a ui.refreshable: https://nicegui.io/documentation/refreshable

[evnchn]

Would recommend ui.navigation.reload()

It is because, if not implemented correctly, changing language without reload can lead to weird issues, such as bugs that only shows up when the user switched language but didn't refresh the page.

Moreover, provided that you are using a modern browser with caching enabled, a page reload isn't too unacceptably slow either, with everything except the HTML page should be cached.

[Nurgak]

@evnchn
It seems the ui.navigate.reload function does not work when called from an on_change trigger of a ui.select element. It works as expected from a button click's on_click event (like in the example).

Other functions, such as ui.notify, work as expected from the ui.select's on_change event, so this feels like a bug.

[evnchn]

Do you have any minimal code example that can show this?

I use ui.navigation.reload() a lot, in tons of places, and I don't have such issue.

[Nurgak]

@evnchn
Thank you for asking. While trying to make a minimal code example I found my issue. I was calling on_change=lambda: ui.navigate.reload instead of on_change=ui.navigate.reload. Very embarrassing... sorry for the trouble.

[evnchn]

If you insist to use a lambda, it would more be like: on_change=lambda: ui.navigate.reload()