When I reload my site in Kobweb from a mobile device, it briefly displays in the desktop layout befo...

# kobweb

[Anant Kumar Gupta]

When I reload my site in Kobweb from a mobile device, it briefly displays in the desktop layout before switching to the mobile view, even though I'm using breakpoints for responsiveness. How can I fix this so it directly loads the mobile view without showing the desktop size first?

[David Herman]

Are you using rememberBreakpoint anywhere? Or doing a logical branch based on mobile vs. desktop?

[David Herman]

If everything is using CssStyle breakpoints I wouldn't expect a popping, but maybe this is a side effect of the export process

[Christiano]

I noticed I only have this "problem" when using the static export. Not sure if that might have anything to do with it?

[Christiano]

I say "problem" as I don't know if this is something that is working as intended, or is actually a bug 😅

[David Herman]

Definitely it's related to exporting, which takes a snapshot of your site, good for a faster initial render and SEO

[David Herman]

If you use css breakpoints it shouldn't flash or snap though

[David Herman]

If you use rememberBreakpoint that is a different story

[Christiano]

I think I have used the rememberBreakpoint for my website. So that might explain the flashes!

[David Herman]

Yeah I didn't realize that when I first added the feature. Color mode also flashes. But it is usually worth the benefit and most people don't notice too much

[bruno.aybar]

Not sure if a bad practice or not, but for cases in which the UI layout changes significantly when on mobile vs large screen, I was getting a similar flicker when using rememberBreakpoint (or rather, my custom version of it, but pretty much the same).

So my hacky solution was to have both versions of the layout in the static export, and then using media queries to handle their visibility. I’m unsure of the impact of that solution though, maybe affects SEO? It was good enough for me at least.

Reference PR: https://github.com/Android-Dev-Peru/website-kotlin/pull/13

[David Herman]

I think doing conditional styling to hide show stuff is fine! Note that Kobweb provides modifiers for this

[David Herman]

`Modifier.displayIfAtLeast`and family (code here)