Weird behavior of Suspense component... or not?

[notnullonline]

I have the following page (leptos component)...

I expect that, once the page is loaded in the browser, a logged-in user will be read from the local storage, and fetching the user data (from the server) will be triggered inside the create_effect block.

Anyway, the real situation is that it works as expected if I navigate to the page by clicking on a link, but, it doesn't work on full page reload...

It should work because I re-fetch the data from inside the create_effect block...

Any thoughts? :(

use leptos::{
    component, create_effect, create_resource, create_signal, view, IntoView, SignalGet, Suspense,
};

use crate::app::{
    backend::handlers::user_handler::get_user_profile,
    frontend::services::auth_service::{AuthService, Claims},
};

#[component]
pub fn ProfilePage() -> impl IntoView {
    let (aut_user, set_auth_user) = create_signal(Claims::default());

    create_effect(move |_| {
        // Get the user from the local storage once the code runs in the browser
        let user = AuthService::get_current_user();
        // Set the user and trigger re-fetching the resource
        set_auth_user(user);
    });

    let user = create_resource(
        move || aut_user(),
        move |_| async move {
            let result = get_user_profile(aut_user().user_id).await;
            leptos::logging::log!("Profile: {:?}", result); // I can see the log in the browser console!
            result
        },
    );

    view! {
        <div class="columns">
            <div class="column">
                <h1 class="title is-5">"My Profile"</h1>
                <h2 class="subtitle is-6">"Your personal data"</h2>
                <div class="content">
                    <Suspense fallback=move || {
                        view! { <p>"Loading data..."</p> }
                    }>

                        {move || user.get().map(|user| view! { <p>{user.unwrap().name}</p> })}

                    </Suspense>
                </div>
            </div>
        </div>
    }
}
`

Also, I can see the following warning in the browser console:

`component with id 1-1-0-3c not found, ignoring it for hydration`
`component with id 1-1-0-3o not found, ignoring it for hydration`
...

`you access a signal or memo (defined at src/.../profile_page.rs:12:37) outside a reactive tracking context. This might mean your app is not responding to changes in signal values in the way you expect.`

The first group of errors reminds me of the [hydration bug described here](https://book.leptos.dev/ssr/24_hydration_bugs.html), but the second error doesn't make sense to me...

[gbj]

Hard to know without being able to run it to reproduce -- but why not just use a local resource (create_local_resource) if you don't want it to load until you're in the browser anyway?

[notnullonline]

Because I totally forgot about its existence!!! :(

Thank you very much for pointing out this...