Eliminate observable layout refresh？

[Yurii-huang]

I tried stacking multiple layers and using the on_maunt function to stack sub components, but it caused layout delay, which is not what I wanted. Is there any way to eliminate it?

class ScreenDialog(Screen):
    DEFAULT_CSS = """
    ScreenDialog {
        background: blue;
        align: center middle;
    }
    """
    def show(self):
        self.app.push_screen(self)
    
    def close(self):
        if self.app.screen == self:
            self.dismiss()

class DialogBorad(Static):
    DEFAULT_CSS = """
    DialogBorad {
        border-bottom: thick $background 80%;
        border-right: thick $background 80%;
    }
    DialogBorad> VerticalScroll {
        border: solid darkblue;
    }
    DialogBorad> VerticalScroll:focus-within{
        border: double $accent; 
    }
    DialogBorad> VerticalScroll {
        margin: 1;
        border: solid darkblue;
    }
    """
    def __init__(self):
        super().__init__()
        self.vertical_scroll = VerticalScroll()
        self.btn_box = BtnBox()

    def on_mount(self):
        self.mount(self.vertical_scroll)
        self.mount(self.btn_box)

class Dialog(ScreenDialog):
    
    DEFAULT_CSS = """
    Dialog {
        layer: base;
    }
    Dialog> Static {
        background: #bbbbbb;
        height: 50%;
        width: 50%;
        padding: 0 1 0 1;
    }
    """

    BINDINGS = [
        Binding("tab", "focus_next", "focus previous", show=False),
        Binding("up", "focus_previous", "focus previous", show=False),
        Binding("down", "focus_next", "focus next", show=False),
        Binding("left", "focus_previous", "focus previous", show=False),
        Binding("right", "focus_next", "focus next", show=False),
        Binding("escape", "cancel", "cancel", show=False),
        ]

    def __init__(self):
        super().__init__()
        self.borad = DialogBorad()
    
    @property
    def grid(self):
        return self.borad.vertical_scroll 

    def action_focus_next(self):
        self.focus_next()

    def action_focus_previous(self):
        self.focus_previous()

    def action_cancel(self):
        self.cancel_func()
    
    # override
    def confirm_func(self):
        self.close()
    
    # override
    def cancel_func(self):
        self.close()

    # override
    def on_mount(self):
        self.mount(self.borad)
    
    @on(BtnConfirm.Pressed)
    def _on_btn_confirm_pressed(self, message:BtnConfirm.Pressed):
        if message.button == self.borad.btn_box.btn_confirm:
            self.confirm_func()

    @on(BtnCancel.Pressed)
    def _on_btn_cancel_pressed(self, message:BtnCancel.Pressed):
        if message.button == self.borad.btn_box.btn_cancel:
            self.cancel_func()

class NewPartition(Dialog):
    DEFAULT_CSS = """
    .grid {
        grid-size: 2;
        grid-gutter: 1 0;
        height: 1;
        margin: 1 0 1 0;
    }
    """
    def on_mount(self):
        new_sys_name, self.new_sys_number = NewPartition.new_name(self.cache_event)
        self.sys_name_label = Label(DEV_SYS_NAME)
        self.sys_name_input = IInput(new_sys_name)
        self.sys_name_input.disabled = True
        self.fs_label_label = Label(DEV_FS_LABEL)
        self.fs_label_input = IInput("")
        self.fs_type_label = Label(DEV_FS_TYPE)
        self.fs_type_select = ISelect([(type, type) for type in FS_TYPES], 
                                         allow_blank=False, 
                                         prompt="")
        self.part_sector = NewPartition.new_size(self.cache_event)
        self.fs_size_label = Label(DEV_SIZE)
        self.fs_size_input = IInput(self.part_sector.size,
                                    validators=[self.PartSizeCheck(self.part_sector)],
                                    valid_empty=False)
        self.mountpoint_label = Label(DEV_MOUNTPOINT)
        self.mountpoint_select = ISelect([(mp, mp) for mp in MOUNTPOINTS], 
                                            allow_blank=False,
                                            prompt="")
        self.fs_luks_passwd_rbtn = IRadioButton("enabled luks encrypt")
        self.fs_luks_passwd_label = Label(DEV_LUKS_PASSWD)
        self.fs_luks_passwd_label.display = False # default can't display
        self.fs_luks_passwd_input = IInput("", password=True)
        self.fs_luks_passwd_input.display = False # default can't display
        self.grid.mount(Grid(self.sys_name_label, self.sys_name_input, classes="grid"))
        self.grid.mount(Grid(self.fs_label_label, self.fs_label_input, classes="grid"))
        self.grid.mount(Grid(self.fs_type_label, self.fs_type_select, classes="grid"))
        self.grid.mount(Grid(self.fs_size_label, self.fs_size_input, classes="grid"))
        self.grid.mount(Grid(self.mountpoint_label, self.mountpoint_select, classes="grid"))
        self.grid.mount(self.fs_luks_passwd_rbtn)
        self.grid.mount(Grid(self.fs_luks_passwd_label, self.fs_luks_passwd_input, classes="grid"))

[Yurii-huang]

i found it,

self.grid.mount(Grid(self.sys_name_label, self.sys_name_input, classes="grid"))

chang to

self.grid.compose_add_child(Grid(self.sys_name_label, self.sys_name_input, classes="grid"))

cause do mount can callback refresh()

[willmcgugan]

You might want to read the docs on compound widgets again.

There's rarely a need to mount widgets in your mount handler. It is better to add all your child widgets in compose.

I also wouldn't advice calling compose_add_child as it wasn't intended to be used like that.

[Yurii-huang]

You are right, the mount and refresh functions will be called in conjunction, but using compose_add will not cause this situation