Invisible pane flickering upon page load

[huypham50]

Sidebar pane is flickering upon page load, my guess is that visible prop has a delay due to a ref?

const [visible, setVisible] = useState(false)

<Allotment defaultSizes={[0, 0]}>
    <Allotment.Pane>
        Main pane
    </Allotment.Pane>
    <Allotment.Pane
        minSize={320}
        maxSize={480}
        preferredSize={400}
        visible={visible}
    >
        Sidebar pane
    </Allotment.Pane>
</Allotment>

[mainhanu]

meet the same problem, the storybook demo also flicker when refresh page

https://allotment-storybook.netlify.app/iframe.html?id=basic--horizontal&viewMode=story

https://github.com/user-attachments/assets/15739ac5-660c-49d0-9044-604308106842

it seems panel is render with default content width first, and then rerender to the computed width.

[huypham50]

This is what I ended up doing, not the cleanest solution but it does not flicker

const paneContainer = css({
    display: "flex",
    height: "100%",
    width: "100%",
});

<Allotment>
    <Allotment.Pane className={styles.paneContainer}>
        Main pane
    </Allotment.Pane>
    {selectedBlock && (
        <Allotment.Pane minSize={320} maxSize={480} preferredSize={400}>
            Sidebar pane
        </Allotment.Pane>
    )}
</Allotment>