How to run a slow task on button:click? #1848
-
|
I'm trying to PGP encrypt a string client side when user clicks on a button and this seems to be super slow.
use base64::{engine::general_purpose, Engine as _};
use leptos::*;
use sequoia_openpgp::serialize::stream::{Encryptor, LiteralWriter, Message};
use std::io::Write;
#[component]
pub fn App() -> impl IntoView {
let (data, set_data) = create_signal("".to_string());
view! {
<div>
<pre>{move || data.get()}</pre>
<button on:click=move |_| {
let mut sink = vec![];
let message = Encryptor::with_passwords(Message::new(&mut sink), Some("password"))
.build()
.unwrap();
let mut w = LiteralWriter::new(message).build().unwrap();
let _ = w.write_all(b"Hello world.");
let _ = w.finalize();
let b64 = general_purpose::STANDARD.encode(sink);
set_data.set(b64.clone());
}
>
"Encrypt"
</button>
</div>
}
}
pub fn main() {
mount_to_body(|| {
view! {
<App />
}
})
} |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 8 replies
-
|
I'm having trouble getting I don't think the question really has anything to do with Leptos — it's blocking on the processing time inside your callback, right? I'm totally unfamiliar with the domain here unfortunately. What's your equivalent JS code? If it's using some browser built-ins you might as well use those instead of compiling in additional Rust dependencies. |
Beta Was this translation helpful? Give feedback.
-
|
What errors are you getting with and then I was getting this error: and then I've added
Yes, I think so. Maybe it's more of a wasm question in general? Basically the problem is how do you run some code that blocks in a way that doesn't freeze the UI? Can I run an async function (that will have equivalent async code to encrypt instead of the sync blocking one)? Or should it be offloading it in a webworker? Can that be done from wasm?
const message = await openpgp.createMessage({ binary: new Uint8Array([0x01, 0x01, 0x01]) });
const encrypted = await openpgp.encrypt({
message, // input as Message object
passwords: ['secret stuff'], // multiple passwords possible
});
console.log(encrypted); |
Beta Was this translation helpful? Give feedback.
-
|
Thanks, it was just a matter of the default features. When I run this on my laptop in release mode I get a small lag after button click -- maybe a quarter of a second? So I suspect it might be a hardware difference with something CPU intensive. In the browser, the only way to offload synchronous work in a non-blocking way that I'm aware of is to use a Web Worker, but I don't do much work like this. See Edit to add: of course this won't make it faster, but using a worker should at least make it non-blocking on slower hardware. |
Beta Was this translation helpful? Give feedback.
-
|
I think the slowness is intended. I started looking at https://docs.rs/age/latest/age/ instead of sequoia and I've seen something mentioned that the slowness is due to trying to prevent timing attack thus making the encryption time constant and taking some constant time as well to generate the encryption key. I assume sequoia does the same since they use similar algorithms. Anyway this https://docs.rs/age/latest/age/ seems to be having async methods https://docs.rs/age/latest/age/struct.Encryptor.html#method.wrap_async_output Would I be able to execute an async method when a button is clicked? So even if it takes time at lease the browser doesn't freeze and I can show a loading message or something. |
Beta Was this translation helpful? Give feedback.
-
|
Oh, sure! Using async for an intentionally-slow task makes a ton of sense: an async approach here would basically do some work, set a timer or something, yield back to the browser until the timer goes off, then come back and do some more work, etc. Basically if what's causing the slowness is computation, async can't help you (although it can spread it out into non-blocking chunks). But if what's causing the slowness is intentionally blocking the thread for a period of time, async is ideal. To an async task from the click handler just use |
Beta Was this translation helpful? Give feedback.
-
|
Thank you. I'll try to see if I can get it working. |
Beta Was this translation helpful? Give feedback.
-
|
@gbj Quick question: Do you plan to add something like "leptos_worker" directly in Leptos so we have this feature OOTB? |
Beta Was this translation helpful? Give feedback.
-
|
No, I don't plan on adding it into the core of the library. In general, whenever something can be implemented as a separate package without needing special access to framework internals, that is the best way for it to exist. In general, once something enters the Leptos repository itself it becomes ultimately my responsibility, and I can't take on the maintenance burden for every useful package. |
Beta Was this translation helpful? Give feedback.
-
|
Ok, makes sense. |
Beta Was this translation helpful? Give feedback.
Oh, sure! Using async for an intentionally-slow task makes a ton of sense: an async approach here would basically do some work, set a timer or something, yield back to the browser until the timer goes off, then come back and do some more work, etc. Basically if what's causing the slowness is computation, async can't help you (although it can spread it out into non-blocking chunks). But if what's causing the slowness is intentionally blocking the thread for a period of time, async is ideal.
To an async task from the click handler just use
spawn_local.