search

carbon-design-system / carbon-components-svelte

Svelte implementation of the Carbon Design System
https://svelte.carbondesignsystem.com
Apache License 2.0
2.71k stars 261 forks source link

SideNav from ui-shell is flickering on page reload #1383

Open fbjorn opened 2 years ago

fbjorn commented 2 years ago

Hi,

I tried to copy an example of UI Shell with a sidebar as is from the official docs, and use it in my project. (Header with side navigation from https://carbon-components-svelte.onrender.com/components/UIShell)

But for some reason SideNav is flickering on a page load so there's some delay before the component is rendered on a page. When the window is minimized, the hamburger button is not loaded instantly as well.

I'm using SvelteKit, my only assumption is that it somehow related to a hydration, but it's just a wild guess. Here's the minimal code to reproduce the issue: https://github.com/fbjorn/svelte-carbon-sidenav-issue

And the demo of what I'm talking about:

sidenav sidenav-collapsed

metonym commented 2 years ago

My first instinct is that this is caused by the expansion being determined by the window width:

https://github.com/carbon-design-system/carbon-components-svelte/blob/2fedd6343f4fa0da66fb9e0feba1911e9303cb0f/src/UIShell/SideNav.svelte#L67

This definitely is worth investigating, as it's not ideal from a UX perspective.

fbjorn commented 2 years ago

@metonym forgot to mention, adding rail makes it load fine. I mean:

<SideNav bind:isOpen={isSideNavOpen}>
// ->
<SideNav bind:isOpen={isSideNavOpen} rail>

rail