Using <With>...</With> results in unordered items

[AymanLyesri]

as the title says, e.g the mpris widget becomes last once updated

export default ({
  monitorName,
  halign,
}: {
  monitorName: string;
  halign: Gtk.Align;
}) => {
  return (
    <box class="bar-middle" spacing={5} halign={halign}>
      <With value={createBinding(mpris, "players")}>
        {(players: AstalMpris.Player[]) => players.length > 0 && <Mpris />}
      </With>

      <Weather />
      <Bandwidth />
      <Clock />

      <With value={focusedClient}>{(client) => client && <ClientTitle />}</With>

      <With value={pingedCrypto}>
        {(crypto) =>
          crypto.symbol != "" && (
            <Eventbox
              tooltipText={"click to remove"}
              onClick={() => setPingedCrypto({ symbol: "", timeframe: "" })}
            >
              <Crypto
                symbol={crypto.symbol}
                timeframe={crypto.timeframe}
                showPrice={true}
                showGraph={true}
                orientation={Gtk.Orientation.HORIZONTAL}
              />
            </Eventbox>
          )
        }
      </With>
    </box>
  );
};

There is a workaround by wrapping each in a box but i dont want empty spaces (cause of spacing={5}), is there any fix for this, is it a bug or intentional

[Aylur]

It is documented on the Gnim docs.
It is a limitation with the current implementation, I do have plans to fix this

[AymanLyesri]

Oh didn't notice this part

Setting visible instead achieved what i was looking for.

Thanks Aylur, u doing gods work.