FOUC with components inside Suspense #408
Description
Flash of unstyled content when using components inside Suspense.
Does not happen 100% of the time, but frequently enough:
Minimal repo, with Thaw 0.4.6 and Leptos 0.7.8:
use leptos::prelude::*;
use leptos_meta::{provide_meta_context, MetaTags};
use thaw::ssr::SSRMountStyleProvider;
use thaw::{Button, ConfigProvider};
pub fn shell(options: LeptosOptions) -> impl IntoView {
view! {
<SSRMountStyleProvider>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<AutoReload options=options.clone() />
<HydrationScripts options />
<MetaTags />
</head>
<body>
<App />
</body>
</html>
</SSRMountStyleProvider>
}
}
#[server]
async fn load_data(count: i32) -> Result<i32, ServerFnError> {
tokio::time::sleep(tokio::time::Duration::from_millis(100)).await;
Ok(count * 2)
}
#[component]
pub fn App() -> impl IntoView {
provide_meta_context();
let once = OnceResource::new(load_data(21));
view! {
<ConfigProvider>
<Suspense fallback=move || {
view! { <div></div> }.into_any()
}>
{move || Suspend::new(async move {
match once.await {
Ok(count) => {
view!{
<Button>{count.to_string()}</Button>
}.into_any()
}
Err(_) => {
view!{
<div>"error"</div>
}.into_any()
}
}
})}
</Suspense>
</ConfigProvider>
}
}