AnimatedShow vs. Show

[ricvelozo]

Describe the bug
The when props have different types for AnimatedShow vs. Show. Also, I got an unreachable panic on the hide event when using AnimatedShow with stores. Show is fine.

Leptos Dependencies

[dependencies]
console_error_panic_hook = "0.1.7"
console_log = "1"
log = "0.4.22"
reactive_stores = "0.1.0-rc0"

[dependencies.leptos]
version = "0.7.0-rc0"
features = ["csr"]

To Reproduce
Just click the "Remover" buttons until remains just one row.

Additional context

use leptos::{attr, prelude::*, text_prop::TextProp};
use reactive_stores::Store;

#[derive(Clone, Store)]
struct Colors {
    #[store(key: u32 = |color| color.id)]
    colors: Vec<Color>,
}

#[derive(Default, Clone, Store)]
struct Color {
    id: u32,
    red: u8,
    green: u8,
    blue: u8,
}

#[component]
pub fn ColorPreview(
    #[prop(default = 15)] step: u8,
    #[prop(into, optional)] input_width: Option<TextProp>,
) -> impl IntoView {
    let width = input_width
        .as_ref()
        .map(|w| w.get().into_owned())
        .unwrap_or_else(|| "48px".into());

    let (last_insert_id, set_last_insert_id) = signal(103);
    let store = Store::new(Colors {
        colors: vec![
            Color {
                id: last_insert_id.get_untracked() - 3,
                red: 212,
                green: 19,
                blue: 110,
            },
            Color {
                id: last_insert_id.get_untracked() - 2,
                red: 154,
                green: 81,
                blue: 148,
            },
            Color {
                id: last_insert_id.get_untracked() - 1,
                red: 0,
                green: 61,
                blue: 165,
            },
        ],
    });

    let attrs = (attr::r#type("number"), attr::min(0), attr::max(255));
    let can_remove = Memo::new(move |_| store.colors().read().len() > 1);

    let add_color = move |_| {
        store.colors().write().push(Color {
            id: last_insert_id.get(),
            ..Color::default()
        });
        *set_last_insert_id.write() += 1;
    };

    let update_color = move |component: &mut u8, ev| {
        if let Ok(n) = event_target_value(&ev).parse() {
            *component = n;
        }
    };

    let remove_color = move |id| {
        store.colors().write().retain(|c| c.id != id);
    };

    view! {
        <div class="flex flex-col items-center justify-center h-screen">
            <div class="m-0 mb-2 max-h-96 overflow-scroll">
                <For
                    each={move || store.colors()}
                    key={|color| color.read().id}
                    let:color
                >
                    <div
                        class="
                            flex gap-2 p-2
                            border-0 border-b border-solid border-gray-400 last:border-b-0
                        "
                    >
                        <input
                            style=("width", width.clone())
                            {..attrs.clone()}
                            step={step}
                            prop:value={move || color.read().red}
                            on:input={move |ev| update_color(&mut color.write().red, ev)}
                        />
                        <input
                            style=("width", width.clone())
                            {..attrs.clone()}
                            step={step}
                            prop:value={move || color.read().green}
                            on:input={move |ev| update_color(&mut color.write().green, ev)}
                        />
                        <input
                            style=("width", width.clone())
                            {..attrs.clone()}
                            step={step}
                            prop:value={move || color.read().blue}
                            on:input={move |ev| update_color(&mut color.write().blue, ev)}
                        />
                        <svg width="23" height="23" viewBox="0 0 100 100">
                            <circle cx="50" cy="50" r="50" fill={move || {
                                let Color { id: _, red, green, blue } = color.get();
                                format!("rgb({red} {green} {blue})")
                            }} />
                        </svg>
                        <AnimatedShow
                            when={can_remove}
                            show_class="opacity-100 transition-opacity"
                            hide_class="opacity-0 transition-opacity"
                            hide_delay={std::time::Duration::from_millis(1000)}
                        >
                            <button on:click={move |_| remove_color(color.get().id)}>"Remover"</button>
                        </AnimatedShow>
                    </div>
                </For>
            </div>
            <button on:click={add_color}>"Adicionar"</button>
        </div>
    }
}

fn main() {
    _ = console_log::init_with_level(log::Level::Debug);
    console_error_panic_hook::set_once();

    mount_to_body(|| view! { <ColorPreview step=15 input_width="48px" /> });
}

[gbj]

This does seem to be specifically related to the interaction between AnimatedShow, For, and store fields. (I could reproduce it, but not if I switched to For with a plain Vec<_>) It's not likely I'll have the capacity to pursue this in the near future, but help investigating/fixing it is welcome.