blitz-js / blitz-js/legacy-framework

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

Open
#9 3 comments 1 reaction 0 assignees View on GitHub
kind/bug legacy-framework status/ready-to-work-on
Dominant language
JavaScript
Stars
3
Forks
2
PR merge metrics
No merged PRs in 30d

Description

### 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_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.