Components / SplashScreen
SplashScreen
Opening screen that covers the window while the app loads.
Example
The component itself, running in WebAssembly, beside its code in a playground. Try it.
Code
use ravenrs::prelude::*;
fn splash_screen() -> impl View {
/// Pretends to load for three seconds. A real app sets the same values as its work advances.
struct Loading;
impl View for Loading {
fn build(&self, cx: &mut BuildCx<'_>) -> NodeId {
const SECONDS: f64 = 3.0;
let visible = cx.use_state(|| false);
let started = cx.use_state(|| None::<f64>);
let now = cx.now();
let elapsed = match (visible.get(), started.get()) {
(true, Some(start)) => now - start,
(true, None) => {
started.set(Some(now));
0.0
}
(false, _) => {
started.set_if_changed(None);
0.0
}
};
if elapsed >= SECONDS {
visible.set(false);
} else if visible.get() {
cx.wake_at(now + 0.25);
}
let status = match elapsed {
e if e < 1.0 => "Opening the database",
e if e < 2.0 => "Loading your accounts",
_ => "Almost there",
};
let show = visible.clone();
let splash =
SplashScreen::new(visible.binding(), "Raven Finance").icon(IconName::Wallet).status(status);
// A spinner until there is something to measure, then a bar.
let splash = if elapsed < 1.0 { splash } else { splash.progress((elapsed / SECONDS) as f32) };
let page = VStack::new((
Button::new("Show the splash screen")
.style(ButtonStyle::Secondary)
.on_click(move || show.set(true)),
splash,
));
cx.child(&page)
}
}
Loading
}