[Python] How do I insert a ui.page_navbar() layout using ui.insert()?

I have the following Shiny for Python app that I want to execute where the app starts with a simple welcome page that asks for a value, with a button that the user clicks on when complete. After the button is clicked, a new page renders with a ui.page_navbar layout (including the text value entered at the welcome page).

Here is the code:

from shiny import App, ui, reactive, render

# main ui object for the app
app_ui = ui.page_fluid(
ui.div(
( "Welcome Screen",
ui.input_text(id='str_val', label='Type in something'),
ui.input_action_button(id="btn_welcome", label="Proceed!"),
),
id="welcome_screen",
),
ui.div(id="main_page")
)

# main server function for the app
def server(input, output, session):
@reactive.effect
@reactive.event(input.btn_welcome, ignore_init=True, ignore_none=True)
def _():
ui.remove_ui(selector="div:has(> #welcome_screen)")

ui.insert_ui(
selector=f"#main-page",
where="beforeBegin",
ui= ui.page_navbar(

ui.nav_panel("Tab 1", "Tab 1 content",ui.output_text('str_val')),
ui.nav_panel("Tab 2", "Tab 2 content"),
ui.nav_panel("Tab 3", "Tab 3 content"),
title="Main Page",
id="page",
),
)

@render.text
def str_val():
return input.str_val()

app = App(app_ui, server)


When I run this, the welcome screen loads and works as expected. When I click on the button, the welcome screen disappears, but then the screen is blank, the ui.page_navbar layout doesn't appear. I have successfully used ui.insert_ui to place content within a div before successfully, but for some reason it isn't working with a page_navbar type tag. I thought maybe the issue was that a ui.page_navbar object couldn't be placed inside a div (where I'm trying to insert it using ui.insert_ui), but in a separate test I was able to do that by just placing it in the app_ui code manually.

I appreciate any suggections.

Continue reading...