RequiredAuthProvider makes NextJS flicker

[kosciak9]

So I believe this could be an easy enhancement, right now RequriedAuthProvider will make NextJS page flicker when changing links.

// example _app.ts that will show what I mean, DevTools are just an easy thing to install
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import "@/styles/globals.css";
import type { AppProps } from "next/app";
import { RequiredAuthProvider } from "@propelauth/react";

// Create a client
const queryClient = new QueryClient();

export default function App({ Component, pageProps }: AppProps) {
  return (
    <RequiredAuthProvider
      authUrl="https://63873406342.propelauthtest.com"
      displayWhileLoading={() => (
        <div
          style={{
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            height: "100vh",
            width: "100vw",
            backgroundColor: "blue",
            color: "white",
          }}
        >
          Loading...
        </div>
      )}
    >
      <QueryClientProvider client={queryClient}>
        <ReactQueryDevtools />
        <Component {...pageProps} />
      </QueryClientProvider>
    </RequiredAuthProvider>
  );
}

if you will open DevTools (or any such modal, where this is visible) and change page, there will be a layout shift / animation retrigger. We have switch to AuthProvider + custom component with AuthInfo, which works in the same way. I believe that RequiredAuthProvider always reloads / rechecks authentication state, while AuthProvider doesn't. Excuse my way of writing, but this was quite a long research and it's late here. :)

[andrew-propelauth]

Thanks for writing in! Could you clarify for me - are you saying the RequiredAuthProvider is causing an extra re-render of the page that doesn't happen with the AuthProvider?

[kosciak9]

Yes

[csulit]

Same issue as well, especially when the side nav is in the closed state. If you click on a nav item, the side nav will return to the open.

[andrew-propelauth]

Apologies for not responding here - there was a fix for this that went out a few releases back. Let us know if you are still seeing it and we can re-open and investigate