How can I make <Suspense/>
rerender its children each time they resolve?
#1990
-
According to #1157, the But in the situation I am building, I want the I'm using Leptos v0.5.2 with its Islands architecture and below is part of my code snippet: use cfg_if::cfg_if;
use leptos::*;
use leptos_meta::*;
use leptos_router::*;
use serde::{Deserialize, Serialize};
cfg_if! {
if #[cfg(feature = "ssr")] {
use lazy_static::lazy_static;
use taos::*;
use taos_query::Manager;
lazy_static! {
static ref TAOS: Pool<TaosBuilder> = Pool::builder(Manager::from_dsn("taos://").unwrap().0)
.build()
.unwrap();
}
}
}
#[derive(Serialize, Deserialize, Clone, Debug)]
pub struct BatchInfo {
#[serde(alias = "table_name")]
name: String,
}
#[server]
async fn get_batch_info() -> Result<Vec<BatchInfo>, ServerFnError> {
let taos = TAOS.get().await?;
tokio::time::sleep(std::time::Duration::from_secs(2)).await;
Ok(taos
.query("SHOW training_data.tables")
.await?
.deserialize()
.try_collect()
.await?)
}
#[island]
fn Home() -> impl IntoView {
let (tick, set_tick) = create_signal(0);
let batch_info = create_resource(tick, |_| async { get_batch_info().await });
create_effect(move |_| {
set_interval(
move || {
set_tick(tick.get() + 1);
},
std::time::Duration::from_secs(300),
)
});
view! {
<Suspense fallback=move || {
view! {
<div class="flex justify-center items-center h-screen">
<div class="bg-white flex space-x-2 p-5 rounded-full justify-center items-center">
<div class="bg-blue-800 p-2 w-4 h-4 rounded-full animate-bounce"></div>
<div class="bg-green-800 p-2 w-4 h-4 rounded-full animate-bounce"></div>
<div class="bg-red-800 p-2 w-4 h-4 rounded-full animate-bounce"></div>
</div>
</div>
}
}>
<ErrorBoundary fallback=move |_| view! { <h1>"Something went wrong."</h1> }>
<div>
{move || {
batch_info
.and_then(|batch| {
batch
.iter()
.map(|item| view! { <div>{item.name.clone()}</div> })
.collect_view()
})
}}
</div>
</ErrorBoundary>
</Suspense>
}
} Though I'm sure that the Thanks in advance! |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 5 replies
-
I think there's some misunderstanding here. This block should be sufficient to reactively render the value of {move || {
batch_info
.and_then(|batch| {
batch
.iter()
.map(|item| view! { <div>{item.name.clone()}</div> })
.collect_view()
})
}} Are you sure |
Beta Was this translation helpful? Give feedback.
Yes, the very large number of hydration warnings are the reason it is not updating as expected. The solution you linked to with
request_animation_frame
is not necessarily the correct solution here. It is not possible to debug based on the information you've given. I'd recommend removing sections of your app (commenting things out) until you have a version with no warnings, then adding things back in and seeing where it breaks.