Spacing does not respect widget visibility

[Vinschers]

I am not sure if this is intended behavior, but whenever I have a Widget.Box with some spacing set between its children, the children which are not visible affect the spacing

So, for instance

Widget.Box({
    spacing: 10,
    children: [
        Widget1(), // visible = true
        Widget2(), // visible = false
        Widget3(), // visible = true
    ],
})

I would expect widgets 1 and 3 to be spaced with 10 pixels between them, but they end up being spaced with 20 pixels.

[Aylur]

are you sure the middle widget is invisible? because it works as you'd expect

Widget.Window({
    child: Widget.Box({
        spacing: 20,
        children: [
            Widget.Label('x'),
            Widget.Label({
                label: 'x',
                setup: self => setTimeout(() => {
                    self.visible = false;
                }, 1000)
            }),
            Widget.Label('x'),
        ],
    }),
})

[Vinschers]

Sorry, I should have been more specific. In my current config, I am trying to use ags as a status bar. In the right hand side of the bar, I am placing this Widget:

const Right = (monitor) =>
    Widget.Box({
        class_name: "bar-right",
        hpack: "end",
        spacing: 16,
        children: [
            Packages(),
            Weather(),
            Theme(),
            Keyboard(),
            System(),
            Configurations(),
            Battery(),
            Clock(),
            // Widget.Box({
            //     visible: false,
            // }),
        ],
    });

It shows up with no problem.

However, when I uncomment that last box, which is invisible, I get the following look:

I believe the bar should not display this extra spacing to the right.

In fact, I was trying to use a SystemTray widget instead of a blank Box, but the spacing issue is the same.

EDIT: Just to give more information of what is going on, if I give some padding (or margin) to the widget, it seems that the style is applied even though the widget should be invisible.

Widget.Box({
    css: "padding-left: 0.8rem; padding-right: 0.8rem;",
    visible: false,
})

[Aylur]

setting visibility statically this way doesn't work, because the parent container calls show_all implicitly, meaning the box widget is not actually invisible you want to set it dynamically with a timeout or in your case with a bind

Box({
  setup: self => self
    .bind('visible', SystemTray, 'items', i => i.length > 0)
})