Suspense start

public/glue.js

@@ -8,7 +8,6 @@ export async function write_config_js(config) {
     return await invoke("write_config", { config: config });
 }
 
-export function load_config_js() {
-    console.log("AHHAHAH")
-    return invoke("load_config");
+export async function load_config_js() {
+    return await invoke("load_config");
 }

src-tauri/config.toml

@@ -1,3 +1,3 @@
-cslol_dir = "WHY U RK"
-wad_dir = ""
+cslol_dir = ""
+wad_dir = "C:\\Riot Games\\League of Legends\\Game\\DATA\\FINAL\\Champions"
 extract_dir = ""

src-tauri/src/config_settings.rs

@@ -11,7 +11,6 @@ pub struct Config {
 
 #[tauri::command]
 pub async fn init_config() {
-    // Check if the config file exists asynchronously
     if fs::metadata("config.toml").is_err() {
         let config = Config {
             cslol_dir: "".to_string(),
@@ -23,21 +22,18 @@ pub async fn init_config() {
 }
 
 #[tauri::command]
-pub fn load_config() -> Config {
+pub async fn load_config() -> Config {
     let config = fs::read_to_string("config.toml")
         .expect("Failed to read config.toml file");
-    print!("COMMAND \n{}", config);
     toml::from_str(&config)
         .expect("Failed to parse config.toml file")
 }
 
 #[tauri::command]
 pub async fn write_config(config: Config) {
-    // Serialize the config synchronously (no async TOML serializer by default)
     let config_content = toml::to_string(&config)
         .expect("Failed to serialize config");
 
-    // Write the config file asynchronously
     fs::write("config.toml", config_content)
         .expect("Failed to write to config.toml file");
 }

src/app.rs

@@ -1,9 +1,8 @@
 use wasm_bindgen::prelude::*;
-use wasm_bindgen_futures::spawn_local;
 use yew::prelude::*;
 use yew_router::prelude::*;
 
-use crate::{config_settings::init_config, views::*};
+use crate::views::*;
 
 #[wasm_bindgen]
 extern "C" {
@@ -27,10 +26,14 @@ pub enum Route {
 
 #[function_component(App)]
 pub fn app() -> Html { 
+    let fallback = html! {<div class="content" >{"Loading..."}</div>};
+
     html! {
         <BrowserRouter>
-            <nav::Nav/>
-            <Switch<Route> render={switch} />
+        <nav::Nav/>
+            <Suspense {fallback}>
+                <Switch<Route> render={switch} />
+            </Suspense>
         </BrowserRouter>
     }
 }

src/config_settings.rs

@@ -1,5 +1,3 @@
-use std::f32::consts::E;
-
 use serde::{Deserialize, Serialize};
 use serde_wasm_bindgen::*;
 use wasm_bindgen::prelude::*;
@@ -19,18 +17,14 @@ extern "C" {
     #[wasm_bindgen(js_name = write_config_js, catch)]
     pub async fn write_config_js(config: JsValue) -> Result<JsValue, JsValue>;
 
-    #[wasm_bindgen(js_name = load_config_js)]
-    pub fn load_config_js() -> JsValue;
+    #[wasm_bindgen(js_name = load_config_js, catch)]
+    pub async fn load_config_js() -> Result<JsValue, JsValue>;
 }
 
 pub async fn write_config(config: Config) -> Result<JsValue, JsValue> {
     write_config_js(to_value(&config).unwrap()).await
 }
 
-pub fn load_config() -> Result<Config, Error> {
-    let serdeshit: Result<Config, Error> = from_value(load_config_js());
-    print!("{}", serdeshit.as_ref().expect("I Hate Js").cslol_dir);
-    serdeshit
-}
-
-
+pub async fn load_config() -> Result<Config, Error> {
+    from_value(load_config_js().await.unwrap())
+}

src/main.rs

@@ -4,9 +4,13 @@ mod views;
 mod config_settings;
 
 use app::App;
+use config_settings::init_config;
+use yew::platform::spawn_local;
 
 fn main() {
-
     console_error_panic_hook::set_once();
     yew::Renderer::<App>::new().render();
+    spawn_local(async move {
+        init_config().await;
+    })
 }

src/views/settings.rs

@@ -1,59 +1,42 @@
-use std::{cell::RefCell, rc::Rc};
-
+use yew::suspense::use_future;
 use crate::config_settings::*;
 use wasm_bindgen_futures::spawn_local;
-use web_sys::{console, HtmlInputElement};
+use web_sys::HtmlInputElement;
 use yew::prelude::*;
 
 #[function_component(Settings)]
-pub fn settings() -> Html {
+pub fn settings() -> HtmlResult {
+    let config_future = use_future(|| async {load_config().await})?;
 
-    let config_handle = use_state(Config::default);
-    config_handle.set(load_config().unwrap());
-
-    // {
-    //     let config_handle = config_handle.clone();
-
-    //     use_effect(move || {
-    //         spawn_local(async move {
-    //             init_config().await.unwrap();
-    //         })
-    //     });
-    // }
-
-    let config = (*config_handle).clone();
+    let config = config_future.as_ref().unwrap().clone();
 
     let cslol_dir_ref = use_node_ref();
     let wad_dir_ref = use_node_ref();
     let extract_dir_ref = use_node_ref();
 
     let on_submit = {
-
         let cslol_dir_ref = cslol_dir_ref.clone();
         let wad_dir_ref = wad_dir_ref.clone();
         let extract_dir_ref = extract_dir_ref.clone();
 
-        Callback::from(move |event: SubmitEvent| {
-            let mut config = (*config_handle).clone();
-
-
-            let cslol_dir = cslol_dir_ref.cast::<HtmlInputElement>();
+        Callback::from(move |_event: SubmitEvent| {
+            let cslol_dir = cslol_dir_ref.cast::<HtmlInputElement>().unwrap().value();
             let wad_dir = wad_dir_ref.cast::<HtmlInputElement>().unwrap().value();
             let extract_dir = extract_dir_ref.cast::<HtmlInputElement>().unwrap().value();
 
-            if let Some(cslol_dir) = cslol_dir {
-                config.cslol_dir = cslol_dir.value();
-                config_handle.set(config.clone());
-            }
+            let config = Config {
+                cslol_dir,
+                wad_dir,
+                extract_dir,
+            };
 
             spawn_local(async move {
-                write_config(config.clone()).await.unwrap();
+                write_config(config).await.unwrap();
             });
         })
     };
 
-    console::log_1(&"SCREMING".into());
-
+    Ok(
     html! {
         <div class="content">
             <h2>{"Settings"}</h2>
@@ -62,19 +45,19 @@ pub fn settings() -> Html {
                     <div>
                         <label for="cslol_dir">{"Location of CSLoL"}</label>
                         <br/>
-                        <input id="cslol_dir" ref={cslol_dir_ref} value={config.cslol_dir}/>
+                        <input id="cslol_dir" ref={cslol_dir_ref} value={config.cslol_dir.clone()}/>
                     </div>
 
                     <div>
                         <label for="wad_dir">{"Custom location of Champion Wads"}</label>
                         <br/>
-                        <input id="wad_dir" ref={wad_dir_ref} />
+                        <input id="wad_dir" ref={wad_dir_ref} value={config.wad_dir.clone()}/>
                     </div>
 
                     <div>
                         <label for="extract_dir">{"Custom location to Extract to"}</label>
                         <br/>
-                        <input id="extract_dir" ref={extract_dir_ref} />
+                        <input id="extract_dir" ref={extract_dir_ref} value={config.extract_dir.clone()}/>
                     </div>
 
 
@@ -83,4 +66,5 @@ pub fn settings() -> Html {
             </div>
         </div>
     }
+)
 }