The conditional rendering of <svg> is incorrect

[dandedotdev]

I have a simple personal blog in Leptos, and I'd like to call for help.

Repository: dande.dev
Deployed Page: my blog

Today, I tried to upgrade the dependencies:

axum: 0.7.9 to 0.8.4
leptos, leptos_axum, leptos_meta, leptos_router: 0.7.8 to 0.8.2

I also upgraded the cargo-leptos to the latest version.

And then I found the theme_switcher is broken. (It's at the top-right corner of the page.)

The relevant components are:

• theme_swticher
• moon_icon
• sun_icon

I tried to print some logs in the UI:

// @file theme_switcher
{move || {
  match theme.get() {
    Theme::Dark => {
      leptos::logging::log!("{:?}", theme.get()); // print theme
      view! { <MoonIcon /> }.into_any()
    },
    Theme::Light => {
      leptos::logging::log!("{:?}", theme.get()); // print theme
      view! { <SunIcon /> }.into_any()
    },
    Theme::Unknown => {
      view! {
        <span class="block invisible text-0 size-6">
	  "Theme Unknown"
        </span>
      }
      .into_any()
    }
  }
}}

// @file moon_icon
#[component]
pub fn MoonIcon() -> impl IntoView {
  leptos::logging::log!("Rendering MoonIcon");

  view! {
    // SVG...
  }
}

// @file sun_icon
#[component]
pub fn SunIcon() -> impl IntoView {
  leptos::logging::log!("Rendering SunIcon");

  view! {
    // SVG...
  }
}

I found after I toggled the theme to Dark, the SVG will always be MoonIcon. Even the log shows Rendering SunIcon.

I also try to replace the <MoonIcon> and <SunIcon> with pure text, like:

Theme::Dark => {
  view! { "M" }.into_any()
},
Theme::Light => {
  view! { "S" }.into_any()
},

And it works well.

I'd like to know what's the difference between conditional rendering svg and text.

Thanks for your attention and your patience.

[gbj]

If you think it's a bug, it would be helpful if you open an issue with a minimal reproduction (not your whole site) that fixes can be tested against.

[dandedotdev]

Thank for your reply. I will!

[dandedotdev]

I found I should use <Show> to do this kind of conditional rendering.

I still don't know why it worked before, but I'm happy to find the solution.

Thanks for your kindness!