Fixes for flashes

Cargo.toml

@@ -27,6 +27,8 @@ console_log = "1.0.0"
 log = "0.4"
 
 [features]
+# I am not 100% sure this is needed but it is what I see in the examples and it works
+csr = ["leptos/csr", "leptos_meta/csr", "leptos_router/csr"]
 hydrate = ["leptos/hydrate", "leptos_meta/hydrate", "leptos_router/hydrate"]
 ssr = [
     "dep:axum",

src/app.rs

@@ -1,9 +1,9 @@
+use crate::dark_mode::{DarkModeToggle, ToggleDarkMode};
 use crate::error_template::{AppError, ErrorTemplate};
+use leptos::logging::log;
 use leptos::*;
 use leptos_meta::*;
 use leptos_router::*;
-use crate::dark_mode::{DarkModeToggle, ToggleDarkMode};
-use leptos::logging::log;
 
 // Helper to register all our server functions, if we're in SSR mode
 /* #[cfg(feature = "ssr")]
@@ -19,7 +19,7 @@ pub fn App() -> impl IntoView {
     provide_meta_context();
 
     view! {
-        <Stylesheet id="leptos" href="/pkg/dark-theme-axum.css"/>   
+        <Stylesheet id="leptos" href="/pkg/dark-theme-axum.css"/>
 
         // sets the document title
         <Title text="Welcome to Leptos"/>
@@ -48,7 +48,7 @@ fn HomePage() -> impl IntoView {
     let on_click = move |_| set_count.update(|count| *count += 1);
 
     view! {
-        <DarkModeToggle prefers_dark_default=true/>
+        <DarkModeToggle/>
         <h1>"Welcome to Leptos!"</h1>
         <button on:click=on_click>"Click Me: " {count}</button>
     }

src/dark_mode.rs

@@ -22,15 +22,16 @@ pub async fn toggle_dark_mode(prefers_dark: bool) -> Result<bool, ServerFnError>
     );
     response_parts.headers = headers;
 
-    std::thread::sleep(std::time::Duration::from_secs(1));
+    //std::thread::sleep(std::time::Duration::from_secs(1));
 
     response.overwrite(response_parts); //.await ???
     Ok(prefers_dark)
 }
 
 // this macro means something like: this is only for the client
 #[cfg(not(feature = "ssr"))]
-fn initial_prefers_dark(prefers_dark_default: bool) -> bool {
+//#[cfg(feature = "ssr")]
+fn initial_prefers_dark() -> bool {
     log!("Inside initial pref not ssr");
     use wasm_bindgen::JsCast;
 
@@ -39,7 +40,7 @@ fn initial_prefers_dark(prefers_dark_default: bool) -> bool {
     if cookie.contains("darkmode") {
         cookie.contains("darkmode=true")
     } else {
-        prefers_dark_default == true
+        true
     }
 }
 
@@ -48,31 +49,27 @@ fn initial_prefers_dark(prefers_dark_default: bool) -> bool {
 // In fact RequestParts does not exists anymore inside leptos_axum.
 // We just use http::request::Parts whose now implements Clone.
 #[cfg(feature = "ssr")]
-fn initial_prefers_dark(prefers_dark_default: bool) -> bool {
+fn initial_prefers_dark() -> bool {
     log!("Inside initial pref ssr");
     use axum_extra::extract::cookie::CookieJar;
     use http::request::Parts; 
     use_context::<Parts>()
         .and_then(|req| {
             let cookies = CookieJar::from_headers(&req.headers);
-            cookies.get("darkmode").and_then(|v| match v.value() {
-                "true" => Some(true),
-                "false" => Some(false),
-                _ => Some(prefers_dark_default),
+            cookies.get("darkmode").map(|v| match v.value() {
+                "true" => true,
+                _ => false,
             })
         })
-        .unwrap_or(false)
+        .unwrap_or(true)
 }
 
 #[component]
 pub fn DarkModeToggle(
-    /// Whether the component should initially prefer dark mode
-    #[prop(optional)]
-    prefers_dark_default: bool
 ) -> impl IntoView {
     log!("Inside DarkModeToggle");
 
-    let initial = initial_prefers_dark(prefers_dark_default);
+    let initial = initial_prefers_dark();
 
     let toggle_dark_mode_action = create_server_action::<ToggleDarkMode>();
 
@@ -106,25 +103,23 @@ pub fn DarkModeToggle(
     view! {
         <Meta name="color-scheme" content=color_scheme/>
         <ActionForm action=toggle_dark_mode_action>
-            <input 
-                type="hidden" 
-                name="prefers_dark" 
+            <input
+                type="hidden"
+                name="prefers_dark"
                 value=move || {
                     log!("Inside the hidden input");
                     (!prefers_dark()).to_string()
                 }
             />
-            <input 
-                type="submit" 
+
+            <input
+                type="submit"
                 value=move || {
                     log!("Inside the submit");
-                    if prefers_dark() {
-                        "Switch to Light Mode"
-                    } else {
-                        "Switch to Dark Mode"
-                    }
+                    if prefers_dark() { "Switch to Light Mode" } else { "Switch to Dark Mode" }
                 }
             />
+
         </ActionForm>
     }
 }