How do I run a task in the background?

[ConsoleC137]

I am writing a small web application. This example is taken as a basis. My application takes images, turns them into black and white by pressing a button, and then initiates the download of the converted images. However, when calculations occur, the page freezes. I tried using yew::platform::spawn_local, but it didn't help in any way.

Button code:
<button onclick={ ctx.link().callback(|_| Msg::Clicked) }>{"Convert"}</button>

Image Conversion code:

Msg::Clicked => {
                let files = self.files.clone();
                
                for file in files {
                    let doc = gloo::utils::document();
                    let a = doc.create_element("a").unwrap();

                    yew::platform::spawn_local(async move {
                        let gray = image::load_from_memory(&file.data).unwrap().grayscale();

                        let mut buf = std::io::Cursor::new(vec![]);
                        gray.write_to(&mut buf, image::ImageFormat::Png).unwrap();
                        let res_base64 = base64::encode(buf.get_ref());
                        
                        a.set_attribute("href", &format!("data:image/jpeg;base64,{res_base64}")).unwrap();
                        a.set_attribute("download", "your_file_name.jpg").unwrap();
                        a.dyn_into::<HtmlElement>().unwrap().click();
                    });
                }
                true
            }

[jq170727]

I am new to Yew and while looking around on how to solve a different problem I came across an article and application which uses a Yew agent and a web worker. I believe in that application the agent/worker helps keep the main Yew thread responsive. Perhaps an agent/worker could help with your image calculation?