search

blitz-js / legacy-framework

MIT License
2 stars 2 forks source link

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

Open tafelito opened 2 years ago

tafelito commented 2 years ago

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 commented 2 years ago

Thanks for the report! We'll look into this

beerose commented 2 years ago

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

jacob271 commented 4 months ago

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