How do I "rehydrate/paint" a component on client side in a SSR app after it loads?

[ronaldslc]

I am trying to use leptos_use::use_color_mode_with_options to create a darkmode button.

I have a SSR app, but the dark mode is dependent on client side attribute only.

I got the mode and set_mode signal from UseColorMode.... and pass it into my custom component but it seems signals are not refreshed automatically on load? So my button stays rendered with original SSR value which is wrong.

How can I make sure when mode signal is updated the component is updated? I see use_color_mode.rs has it's own code and update routine directly on the HTML element, but I thought by just attaching the signals to my dark mode component it would also be updated?

Sorry I've relatively new to using leptos and reactive_graph. I see other functions in leptos-use used things like request_animation_frame but I'm not able to understand how it works.

let UseColorModeReturn { mode, set_mode, .. } ....

<DarkMode mode=mode set_mode=set_mode />

#[component]
pub fn DarkMode(mode: Signal<ColorMode>, set_mode: WriteSignal<ColorMode>) -> impl IntoView {
    let nextMode = move |_| {
        set_mode.set(match mode.get() {
            ColorMode::Dark => ColorMode::Light,
            ColorMode::Light => ColorMode::Dark,
            _ => ColorMode::Auto,
        })
    };
    let nextTitle = move || match mode.get() {
        ColorMode::Dark => "Change to Light",
        ColorMode::Light => "Change to Dark",
        _ => "Change to Auto",
    };
    let nextIcon = move || match mode.get() {
        ColorMode::Dark => i::BiSunRegular,
        ColorMode::Light => i::BiMoonRegular,
        _ => i::BiSunSolid,
    };

    view! {
        <button
            on:click=nextMode
            title=nextTitle
        >
            <Icon icon=Signal::derive(nextIcon) />
        </button>
    }
}

[gbj]

The renderer assumes that your application state is the same on the server and the client, so you're correct -- if there are values for attributes that differ between the two, you will see the server value initially, and it won't update to the client value during hydration.

If you want to run some code on the client only (such as updating a signal that is not known on the server), the simplest way to do this is by creating an Effect (which only run on the client.)

So, the simplest way to achieve what you're trying to do might be to have the value read from some signal, and Effect::new(move |_| set_that_signal.set(SomeClientValue)) Note that particularly for dark mode, this will probably cause some kind of flash, if the value sent by the server is different from the client -- IIRC leptos-use does have utilities to set dark mode based on a cookie etc. to avoid this kind of flash, but I am not familiar with those and it may be more helpful to ask over there.