How can I make <Suspense/> rerender its children each time they resolve?

[bioinformatist]

According to #1157, the <Suspense/> won't rerender any more.

But in the situation I am building, I want the Resource to be resolved every 5 minutes so that the latest data is displayed.

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 view!{} content is being rendered correctly whenever there is a change in my database, the page continues to display the previous items. How can I trigger a re-rendering of <Suspense/> or <Transition/>?

Thanks in advance!

[gbj]

I think there's some misunderstanding here. This block should be sufficient to reactively render the value of batch_info whenever it changes. This is independent of the question of whether the full children of the Suspense are rerendered: what you have written already should work.

                    {move || {
                        batch_info
                            .and_then(|batch| {
                                batch
                                    .iter()
                                    .map(|item| view! { <div>{item.name.clone()}</div> })
                                    .collect_view()
                            })
                    }}

Are you sure batch_info is actually changing? i.e., you have a create_effect or something to log the value of batch_info, and you can see it changing in the browser console but the view isn't updating? There are no hydration warnings or other errors?

[bioinformatist]

Sorry for misunderstanding.

Yeah I'm sure the batch_info is changing by add log! to closure:

    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| {
                                leptos::logging::log!("{:?}", batch);
                                batch
                                    .iter()
                                    .map(|item| view! { <div>{item.name.clone()}</div> })
                                    .collect_view()
                            })
                    }}

                </div>
            </ErrorBoundary>
        </Suspense>
    }

And it brings changed values back.

However, there's indeed hydration warnings:

I've notice the section in Leptos' book, but I'm not sure where should I insert the request_animation_frame() to solve this matter.

Could you provide either a detailed example or more further explanation? Thank you!

[gbj]

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.

[bioinformatist]

Thanks for your advice. After checking my code with commenting block by block then line by line I finally found that hydration warnings may caused by the islands architecture. To set a reproducable case, I changed the example/todo_app_sqlite into Islands architecture following the chapter in our document, with the component Todos labelled as #[island].

The warning message seems similar to those produced by my code:

Shall we create an issue from here? I apologize if there has been any misunderstanding:sparkling_heart:

[gbj]

Feel free to create an issue with a reproduction.

[bioinformatist]

Yeah it comes #1996.

I tried to use original architecture and everything is OK now. Once this issue is fixed I'll switch to Islands again:smile: