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

Page flickers when using authenticate in any of it's forms #9

Open
tafelito opened this issue Jan 13, 2022 · 3 comments
Open

Page flickers when using authenticate in any of it's forms #9

tafelito opened this issue Jan 13, 2022 · 3 comments

Comments

@tafelito
Copy link

tafelito commented Jan 13, 2022

What is the problem?

When using Page.authenticate = true or Page.authenticate = { redirectTo: '/' } you can see how the page actually flickers and then you get redirected

I believe this also happens when using Page.suppressFirstRenderFlicker = true

Here's a codesandbox with a reproduction

https://codesandbox.io/s/wispy-sea-vpuo7?file=/app/users/pages/account.tsx

One thing that I found out is that I have any query that triggers the Suspense inside _app, then the fallback component will be shown instead. To test this, one thing that you can try is to uncomment the Layout component that uses the useSession hook here https://codesandbox.io/s/wispy-sea-vpuo7?file=/app/core/layouts/Layout.tsx

What are detailed steps to reproduce this?

  1. open codesandbox
  2. navigate to https://vpuo7.sse.codesandbox.io/account

Run blitz -v and paste the output here:

Loaded env from /sandbox/.env
Linux 5.4 | linux-x64 | Node: v14.18.1

blitz: 0.45.0 (local)

  Package manager: yarn
  System:
    OS: Linux 5.4 Debian GNU/Linux 10 (buster) 10 (buster)
    CPU: (8) x64 Intel(R) Core(TM) i7-7700 CPU @ 3.60GHz
    Memory: 4.89 GB / 62.61 GB
    Shell: 5.0.3 - /bin/bash
  Binaries:
    Node: 14.18.1 - /tmp/yarn--1642043299032-0.00924757244536778/node
    Yarn: 1.22.17 - /tmp/yarn--1642043299032-0.00924757244536778/yarn
    npm: 6.14.15 - ~/.nvm/versions/node/v14.18.1/bin/npm
    Watchman: Not Found
  npmPackages:
    @prisma/client: latest => 2.24.1
    blitz: 0.45.0 => 0.45.0
    prisma: 3.8.0 => 3.8.0
    react: alpha => 18.0.0-rc.0-next-fe905f152-20220107
    react-dom: alpha => 18.0.0-rc.0-next-fe905f152-20220107
    typescript: ^4.0.3 => 4.3.2


Please include below any other applicable logs and screenshots that show your problem:

No response

@beerose
Copy link
Contributor

beerose commented Jan 18, 2022

Thanks for the report! We'll look into this

@beerose
Copy link
Contributor

beerose commented Jan 20, 2022

So the cause of the issue is probably the SupressFirstRenderFilcker being broken. We'll fix that with the new Blitz toolkit (blitz-js/blitz#3075).

@itsdillon itsdillon transferred this issue from blitz-js/blitz Jul 7, 2022
@jacob271
Copy link

Hey 👋 We also ran into that issue :) It seems like this was a problem before (see #274 ). Maybe this helps when trying to fix it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants