Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Suspense and ErrorBoundary Doesn't render Ok() case if initial render is Err() until transitioning from Err -> Ok -> Err -> Ok #2508

Open
zoomiti opened this issue Apr 9, 2024 · 2 comments
Labels
bug Something isn't working

Comments

@zoomiti
Copy link
Contributor

zoomiti commented Apr 9, 2024

Describe the bug
Basically if an initial page render renders a suspense with an err, the error boundary fallback is rendered. However if through signals the resource that is suspended succeeds on a refetch the success case is not rendered. This is fixed if one more transition to err and then back to ok is performed. This might make more sense by just following the reproduction instructions.

Leptos Dependencies

leptos = { version = "0.6", features = ["nightly"] }
leptos_axum = { version = "0.6", optional = true }
leptos_meta = { version = "0.6", features = ["nightly"] }
leptos_router = { version = "0.6", features = ["nightly"] }

To Reproduce
Steps to reproduce the behavior:
Using the fallible resource branch of my min repro repo

  1. Navigate to the page with query id=6,
  2. Input 4 into the text box that will update the query signal and refetch the resource
  3. Nothing will be rendered at first
  4. Input 6 to render the Error case again
  5. Input 4 and the Ok case will finally be rendered

Expected behavior
If an initial page load renders the fallback of an error boundary, if a signal refetches the resources into an ok, the ok branch should be rendered immediately.

Screenshots
If applicable, add screenshots to help explain your problem.
N/A hopefully but happy to provide if needed

Additional context
This uses a server fn as the resource fetcher, to mirror my actual use case. However I can reproduce the bug without it being a server fn.

@gbj
Copy link
Collaborator

gbj commented Apr 9, 2024

I can reproduce this, and it seems to be an issue with the Suspense not tracking the resource correctly if it's in the fallback branch of the ErrorBoundary.

Adding a simple .track() for the resource outside the ErrorBoundary resolves the issue (and causes some warnings that are not a problem)

<Suspense>
    {resource.track()}
    <ErrorBoundary fallback=|_| view! { "Error" }>{resource}</ErrorBoundary>
</Suspense>

Ultimately it's a non-obvious hydration issue here that I'll have to look into more at some point, or which will be superseded by changes in 0.7.

@gbj gbj added the bug Something isn't working label Apr 9, 2024
@zoomiti
Copy link
Contributor Author

zoomiti commented Apr 9, 2024

I appreciate at least having a patch fix for my app in the meantime. I'll use the track technique for now. Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants