The contents were occasionally hidden by commenting

[bioinformatist]

Below is the definition of one of my components:

#[component]
pub fn PredictedNgRateTd(batch: String, previous_n_days: u8) -> impl IntoView {
    let predicted_count_source = batch.clone();
    let predicted_count = create_resource(
        move || (predicted_count_source.clone(), previous_n_days),
        |(name, previous_n_days)| async move { get_predicted_count(name, previous_n_days).await },
    );

    let predicted_ng_count_source = batch.clone();
    let predicted_ng_count = create_resource(
        move || (predicted_ng_count_source.clone(), previous_n_days),
        |(name, previous_n_days)| async move { get_predicted_ng_count(name, previous_n_days).await },
    );

    view! {
        <Suspense fallback=move || {
            view! {
                <td class="border px-4 py-2">
                    <div class="bg-gray-300 h-2 w-12 animate-pulse"></div>
                </td>
            }
        }>
            <ErrorBoundary fallback=move |_| {
                view! { <span>"加载失败"</span> }
            }>
                <td class="border px-4 py-2">
                    {move || {
                        predicted_ng_count
                            .and_then(|ng_count| {
                                predicted_count
                                    .and_then(|count| {
                                        format!("{:.1}%", *ng_count as f32 / *count as f32)
                                    })
                            })
                    }}
                </td>
            </ErrorBoundary>
        </Suspense>
    }
}

Inside the view! {} block, predicted_count and predicted_ng_count are both of Resource type and were called in nested and_then(). The page loads successfully the first time, however, if the page is reloaded, the contents of some <td> elements are occasionally hidden in different locations:

If I terminate the cargo leptos watch process on my server and then restart it, the page can load successfully again. However, the issue will also occur whenever there is a reload. I am uncertain if the issue is caused by the nested and_then(). Could you provide me some clues? Thanks!

[gbj]

I'm not quite sure how to reproduce this issue to explore it. Do you have a reproducible example? It seems like some kind of hydration error but I'm not sure exactly what's going on.

[bioinformatist]

Let me try to set a reproducible example with fake data source:smile:

[bioinformatist]

@gbj It is indeed a hydration error and can be reproduced on the repo's ssr_modes example with changes below:

1. add a new #[server] function list_post_metadata1():

#[server]
pub async fn list_post_metadata1() -> Result<Vec<PostMetadata>, ServerFnError> {
  tokio::time::sleep(std::time::Duration::from_secs(2)).await;
  Ok(POSTS
      .iter()
      .map(|data| PostMetadata {
          id: data.id,
          title: data.title.clone(),
      })
      .collect())
}

the function is nearly identical to list_post_metadata(), except for the sleep time, which has been adjusted to 2 seconds.

2. then replace the original component HomePage() with:

#[component]
fn HomePage() -> impl IntoView {
    // load the posts
    let posts =
        create_resource(|| (), |_| async { list_post_metadata().await });
    let posts1 =
        create_resource(|| (), |_| async { list_post_metadata1().await });
    let posts_view = move || {
        posts.and_then(|posts| {
                        posts1.and_then(|posts1| {
                            posts.iter().zip(posts1.iter())
                            .map(|(post, post1)| view! {
                                <li>
                                    <a href=format!("/post/{}", post.id)>{&post.title}{&post1.title}</a> "|"
                                    <a href=format!("/post_in_order/{}", post.id)>{&post.title}{&post1.title}"(in order)"</a>
                                </li>
                            })
                            .collect_view()
                        })
                    })
    };

    view! {
        <h1>"My Great Blog"</h1>
        <Suspense fallback=move || view! { <p>"Loading posts..."</p> }>
            <ul>{posts_view}</ul>
        </Suspense>
    }
}

3. finally with cargo leptos watch, we'll encounter hydration errors in the console and no post data will be displayed:
   

The errors are caused by nested and_then() as the external Resource resolves early than the internal one, and the <Suspense/> seems be unable to handle the None state of the internal Resource.

Do you think it is a bug? I'm uncertain if I'm using Leptos correctly in this scenario.

[gbj]

Okay, so here's my understanding: On the server, the <Suspense/> renders once initially to register all resource reads that happen in it, and when they've all resolved, it renders the actual children to HTML. Because of the nested .and_then(), posts1 is actually not registered as part of the <Suspense/> on the server, because when it's first rendered posts is still None.

The good news is that it's relatively easy to fix this by matching a bit more manually on the two resources

let posts_view = move || {
    with!(|posts, posts1| {
        match (posts, posts1) {
            (Some(Ok(posts)), Some(Ok(posts1))) => {
                posts.iter().zip(posts1.iter())
                    .map(|(post, post1)| view! {
                        <li>
                            <a href=format!("/post/{}", post.id)>{&post.title}{&post1.title}</a> "|"
                            <a href=format!("/post_in_order/{}", post.id)>{&post.title}{&post1.title}"(in order)"</a>
                        </li>
                    })
                    .collect_view()
            }
            _ => "...".into_view()
        }
    })
};

The bad news is that nested .and_then() doesn't work with SSR, which makes sense to me now after looking at this example but which I had not previously thought about.