window.load event listener

[s1n7ax]

I have SSR web application. I would like to add an animation when the page is loaded. So, my plan is to tap into window.load event and add a class to the component on window.load. Since I have transition properties in the existing component, it would animate once when the page is loaded.

However, I'm struggling to get access to window object. Following will panic at the server start. I assume because I'm trying to access a window in server component.

let window = window();

Window doesn't seem to be a Option either.

I think what I'm trying to do is something like below but I want it to run only on client. In NextJS I would have checked whether window exists or use useEffect() to run only on client. What can I do in Leptos?

#[component]
fn Header() -> impl IntoView {
	let window = leptos::window();

	let (animate, set_animate) = create_signal(false);

	let a = Closure::<dyn Fn()>::new(move || set_animate(true));

	window.add_event_listener_with_callback("load", a.as_ref().unchecked_ref());

	view! {
		<div>
			<h1
				class="
					transition-transform
					duration-1000
					ease-in-out
					translate-x-32
					opacity-0
				"
				class:translate-x-0=move|| {animate()}
				class:opacity-1=move|| {animate()}
			>
				"Hi!"
			</h1>
		</div>
	}
}

[gbj]

You can use window_event_listener, which will only run on the browser. In general, create_effect only runs on the client.

[s1n7ax]

Noice. Following works beautifully.

let (animate, set_animate) = create_signal(false);
create_effect(move |_| set_animate(true));

However, following is not. Do you know why? @gbj

let (animate, set_animate) = create_signal(false);
// create_effect(move |_| set_animate(true));
let handle = leptos_dom::helpers::window_event_listener(ev::load, move |_| set_animate(true));
on_cleanup(move || handle.remove());

Note that I had to change the default values to conditional attributes to remove them when animate is true

<h1
class="
  transition-all
  duration-1000
  ease-in-out
"
  class:translate-x-0=animate()
  class:opacity-1=animate()

  class:translate-x-32=move|| !animate()
  class:opacity-0=move|| !animate()
>
  "Hi!"
</h1>

However

[gbj]

It looks like your message ends halfway. What about the second one doesn't work? And is it, by any chance, because the window load event is firing before you've added the listener for it?

[s1n7ax]

Oh Yeah. That's it I think. Signal works on click event on window

	let (animate, set_animate) = create_signal(false);

	let handle = leptos_dom::helpers::window_event_listener(ev::click, move |_| {
		leptos::logging::log!("clicked");
		set_animate(true)
	});