Auto-dismiss error toasts after 10 seconds

web/src/components/toast.rs

@@ -0,0 +1,20 @@
+//! Auto-dismissing error toast.
+use gloo_timers::callback::Timeout;
+use sycamore::prelude::*;
+
+const TOAST_MS: u32 = 10_000;
+
+/// Renders the error from `error` as a toast; hides it after `TOAST_MS`.
+/// A new error replaces the message and restarts the timer.
+pub fn toast(error: Signal<Option<String>>) -> View {
+    create_effect(move || {
+        if error.get_clone().is_some() {
+            // Held until cleanup; dropped (cancelled) when the effect re-runs.
+            let timeout = Timeout::new(TOAST_MS, move || error.set(None));
+            on_cleanup(move || drop(timeout));
+        }
+    });
+    view! {
+        (move || error.get_clone().map(|e| view! { div(class="toast") { (e) } }))
+    }
+}