From 4da115b52cd96f6ef6644e33c8d5daf5d2ae16d4 Mon Sep 17 00:00:00 2001 From: Greg Johnston Date: Fri, 5 Aug 2022 07:53:22 -0400 Subject: [PATCH] Transition example (without transitions) --- examples/transition/Cargo.toml | 17 ++++++++ examples/transition/index.html | 19 +++++++++ examples/transition/src/lib.rs | 76 +++++++++++++++++++++++++++++++++ examples/transition/src/main.rs | 9 ++++ 4 files changed, 121 insertions(+) create mode 100644 examples/transition/Cargo.toml create mode 100644 examples/transition/index.html create mode 100644 examples/transition/src/lib.rs create mode 100644 examples/transition/src/main.rs diff --git a/examples/transition/Cargo.toml b/examples/transition/Cargo.toml new file mode 100644 index 000000000..2cfea1328 --- /dev/null +++ b/examples/transition/Cargo.toml @@ -0,0 +1,17 @@ +[package] +name = "transition" +version = "0.1.0" +edition = "2021" + +[dependencies] +leptos = { path = "../../leptos" } +wee_alloc = "0.4" +futures = "0.3" + +[dev-dependencies] +wasm-bindgen-test = "0.3.0" + +[profile.release] +codegen-units = 1 +lto = true +opt-level = 'z' \ No newline at end of file diff --git a/examples/transition/index.html b/examples/transition/index.html new file mode 100644 index 000000000..c5d76a597 --- /dev/null +++ b/examples/transition/index.html @@ -0,0 +1,19 @@ + + + + + + + + \ No newline at end of file diff --git a/examples/transition/src/lib.rs b/examples/transition/src/lib.rs new file mode 100644 index 000000000..eed79f259 --- /dev/null +++ b/examples/transition/src/lib.rs @@ -0,0 +1,76 @@ +use std::{pin::Pin, time::Duration}; + +use futures::{ + channel::oneshot::{self, Canceled}, + Future, +}; +use leptos::*; + +pub fn transition_tabs(cx: Scope) -> web_sys::Element { + let (tab, set_tab) = cx.create_signal(0); + + view! { +
+ +

{move || tab.get().to_string()}

+
+ "Loading..."
}> + //{|| view! {

"test"

}} + {move || view! { }} + +
+ + } +} + +#[component] +pub fn Child(cx: Scope, page: ReadSignal) -> Element { + let data = cx.create_ref(cx.create_resource(&page, |page| fake_data_load(*page))); + + view! { +
+

+ "Lower suspense..."

}> + {move || match &*data.read() { + ResourceState::Idle => view! {

"(no data)"

}, + ResourceState::Pending { .. } => view! {

"Loading..."

}, + ResourceState::Ready { data } => view! { +

{data}

+ } + }} + +

+ + } +} + +async fn fake_data_load(page: usize) -> String { + delay(Duration::from_millis(500)).await; + let page_data = vec![ + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nec dui nunc mattis enim ut tellus elementum sagittis vitae. Quam elementum pulvinar etiam non. Sed faucibus turpis in eu mi. Convallis a cras semper auctor neque vitae tempus quam pellentesque. Duis tristique sollicitudin nibh sit amet. Elementum curabitur vitae nunc sed velit dignissim sodales. Nibh venenatis cras sed felis eget velit aliquet sagittis. In pellentesque massa placerat duis. Integer quis auctor elit sed vulputate mi sit amet mauris. Luctus accumsan tortor posuere ac ut consequat semper. Lorem ipsum dolor sit amet consectetur adipiscing elit. Sed faucibus turpis in eu mi bibendum neque egestas. Dictumst vestibulum rhoncus est pellentesque elit.", + "Placerat orci nulla pellentesque dignissim. Non curabitur gravida arcu ac. Sed odio morbi quis commodo odio aenean sed. Quam elementum pulvinar etiam non quam lacus. Est lorem ipsum dolor sit. Turpis massa sed elementum tempus egestas sed sed. Quam nulla porttitor massa id neque aliquam vestibulum morbi blandit. Aenean pharetra magna ac placerat. Donec et odio pellentesque diam volutpat commodo sed. Eget duis at tellus at urna condimentum. Rhoncus dolor purus non enim praesent elementum facilisis leo vel. Velit laoreet id donec ultrices. Aliquet eget sit amet tellus cras adipiscing enim eu.", + "At consectetur lorem donec massa sapien faucibus et. Vivamus at augue eget arcu dictum. Phasellus vestibulum lorem sed risus ultricies tristique. Nulla aliquet enim tortor at. In tellus integer feugiat scelerisque varius morbi enim nunc. Suspendisse sed nisi lacus sed viverra tellus in. Turpis tincidunt id aliquet risus feugiat in ante metus dictum. Sem viverra aliquet eget sit amet tellus. Enim blandit volutpat maecenas volutpat. Bibendum enim facilisis gravida neque. Ornare quam viverra orci sagittis eu. Urna cursus eget nunc scelerisque viverra mauris. Nibh mauris cursus mattis molestie a. Eget egestas purus viverra accumsan in nisl nisi. Congue eu consequat ac felis donec et. Vulputate dignissim suspendisse in est ante in nibh. Faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis. Augue neque gravida in fermentum et sollicitudin ac orci phasellus. Id faucibus nisl tincidunt eget nullam non nisi." + ]; + page_data[page].to_string() +} + +fn delay(duration: Duration) -> Pin>>> { + let (tx, rx) = oneshot::channel(); + set_timeout( + move || { + tx.send(()); + }, + duration, + ); + Box::pin(rx) +} diff --git a/examples/transition/src/main.rs b/examples/transition/src/main.rs new file mode 100644 index 000000000..cdb26bfeb --- /dev/null +++ b/examples/transition/src/main.rs @@ -0,0 +1,9 @@ +use leptos::*; +use transition::transition_tabs; + +#[global_allocator] +static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT; + +pub fn main() { + mount_to_body(transition_tabs) +}