[Bug]: Splitter causes layout jumps on page load when resizing sidebar/navbar

[Leandro-i2S]

Blazorise Version

2.2.0

What Blazorise provider are you running on?

Bootstrap5

Link to minimal reproduction or a simple code snippet

@* MainLayout.razor *@
<Layout>
    <LayoutSider>
        <Splitter>
            <SplitterSection>
                <!-- Navbar / SideMenu content -->
                <NavMenu />
            </SplitterSection>
            <SplitterSection>
                <!-- Main content -->
                @Body
            </SplitterSection>
        </Splitter>
    </LayoutSider>
</Layout>

Steps to reproduce & bug description

When using the Splitter component to resize a sidebar / navbar placed in the MainLayout, the page does visible layout jumps on the initial load.

The sidebar (NavMenu) and the main content area move horizontally a few times before the layout stabilizes. It looks like the Splitter is adjusting its size after the first render, which causes re-renders and layout shifts.

Steps to reproduce the behavior:

1. Create a MainLayout.razor with a side menu (navbar) and a main content area.
2. Put a Splitter so that the first section contains the sidebar / navbar (NavMenu) and the second section contains the main page content (@Body).
3. Run the app and navigate to any page that uses this layout.
4. Observe the page while it loads: the layout jumps / shifts horizontally before it stabilizes.

What is expected?

The layout should render at the correct sizes on the first paint, without visible layout jumps or flickering.

The Splitter should not cause extra re-renders that move the sidebar and main content during page load.

What browsers do you see the problem on?

Chrome, Microsoft Edge, Firefox

Any additional comments?

• The Splitter is used specifically so the user can resize the expanded navbar / sidebar area.
• The problem happens consistently on every page load where this layout with the Splitter is used.
• There is no custom CSS that changes the Splitter size directly.
• The jumps feel like they are caused by the Splitter computing its final size after the initial render (likely via JS interop) and then updating the DOM, which moves the layout.

You can see a demo here on this repository:

-https://github.com/Leandro-i2S/blazorizeSplitterDemonstration/tree/main

[stsrki]

We will look into it. Although I must confess the Splitter was never meant to be used as part of any menus, including the sidebar.

[Leandro-i2S]

Any news on this issue?

[stsrki]

Not yet, no.

BTW, I'm looking at your example, and I see that you are trying to use both SideNav and a @Body as part of the sider. Any reason why you want to do that? Even without the splitter, that's not recommended.

[Leandro-i2S]

The goal is to make the SideNav resizable, but at the same time I need the @Body content to automatically adjust according to the SideNav width. That's why both the SideNav and the @Body are placed inside the Splitter.
From my perspective, the Splitter seems like a natural fit for this scenario, since resizing one pane should automatically resize the other. Is there another recommended approach in Blazorise for achieving a resizable SideNav while keeping the content area synchronized with its width?

[stsrki]

To me, that seems like pushing it too far for components that were never designed to work like that.

The best way would be to implement a resizable Bar component that works natively in such a way. But that would mean you would have to wait until we do it. If we were to go that way.

As a "workaround," you could implement resizing of the Bar with JS, and by hooking some custom handlers.