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

blank screen triggered on direct visit by beforeLoad calls in StrictMode with trailingSlash set to 'never' or 'always' #1591

Closed
SeanCassiere opened this issue May 14, 2024 · 1 comment
Labels
bug Something isn't working

Comments

@SeanCassiere
Copy link
Contributor

SeanCassiere commented May 14, 2024

Describe the bug

This bug was found when retesting #1553.


The crux of the bug is that, in the right conditions, when visiting a route directly (via the URL bar) the user will only see a white/blank screen with the beforeLoad not being properly awaited.

This bug only occurs when directly visiting a URL. It doesn't occur if you navigate to the page once the application is already loaded in.


It requires the 3 following conditions to be met.

  1. React.StrictMode must be ON.
  2. Router.trailingSlash must be set to always or never.
  3. An async beforeLoad function is set with some wait period (i.e. sleep(500)).

When these 3 conditions have been met and a user then directly visits a route, its beforeLoad function resolves, but the user is only shown a white/blank screen.

When React.StrictMode is turned OFF, everything works correctly. But of course, this is not a solution.

Reproduction

https://stackblitz.com/edit/github-h31abz-yta2mu?file=src%2Fmain.tsx

Steps to Reproduce the Bug or Issue

When trailingSlash is set to never.

  1. Visit /posts/ and see the URL then get rewritten to /posts.
  2. Observe, the loader which instantly resolves, but the beforeLoad call finishes after.
  3. Observe, a white/blank screen is then shown.

When trailingSlash is set to always.

  1. Visit /posts and see the URL then get rewritten to /posts/.
  2. However, a loader which instantly resolves, finishes before the beforeLoad call.
  3. Observe, a white/blank screen is then shown.

Expected behavior

All three trailingSlash behaviours in their loading patterns should be the same, when React.StrictMode is ON versus when it is turned off.

Currently, React.StrictMode OFF yields the expected behaviours, as opposed to when ON, the beforeLoad call is not correctly awaited and a white/blank screen is shown.

Platform

  • OS: macOS
  • Browser: Chrome, Arc
  • TSR Version: 1.32.5
@SeanCassiere SeanCassiere added the bug Something isn't working label May 14, 2024
@SeanCassiere SeanCassiere changed the title beforeLoad calls in StrictMode with trailingSlash set to 'never' or 'always' triggers a white screen blank screen triggered by beforeLoad calls in StrictMode with trailingSlash set to 'never' or 'always' May 15, 2024
@SeanCassiere SeanCassiere changed the title blank screen triggered by beforeLoad calls in StrictMode with trailingSlash set to 'never' or 'always' blank screen triggered on direct visit by beforeLoad calls in StrictMode with trailingSlash set to 'never' or 'always' May 15, 2024
@SeanCassiere
Copy link
Contributor Author

Retested with 1.32.13 and the described bug looks to have been patched out between 1.32.5 and now.

No more white/blank screens! both with React.StrictMode ON and OFF.

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

1 participant