initialize session without loading state (#2180)

src/client/__tests__/client-provider.test.js

@@ -27,6 +27,8 @@ test("fetches the session once and re-uses it for different consumers", async ()
   )
 
   render(<ProviderFlow />)
+  expect(screen.getByTestId("session-consumer-1")).toHaveTextContent("loading")
+  expect(screen.getByTestId("session-consumer-2")).toHaveTextContent("loading")
 
   await waitFor(() => {
     expect(sessionRouteCall).toHaveBeenCalledTimes(1)
@@ -38,6 +40,17 @@ test("fetches the session once and re-uses it for different consumers", async ()
   })
 })
 
+test("initialize provider with session", () => {
+  render(<ProviderFlow session={mockSession} />)
+
+  expect(screen.getByTestId("session-consumer-1")).not.toHaveTextContent(
+    "loading"
+  )
+  expect(screen.getByTestId("session-consumer-2")).not.toHaveTextContent(
+    "loading"
+  )
+})
+
 function ProviderFlow({ options = {} }) {
   return (
     <>
@@ -52,7 +65,8 @@ function ProviderFlow({ options = {} }) {
 function SessionConsumer({ testId = 1 }) {
   const [session, loading] = useSession()
 
-  if (loading) return <span>loading</span>
+  if (loading)
+    return <span data-testid={`session-consumer-${testId}`}>loading</span>
 
   return (
     <div data-testid={`session-consumer-${testId}`}>

src/client/react.js

@@ -180,7 +180,7 @@ export function SessionProvider(props) {
   })
 
   /** If session was passed, initialize as not loading */
-  const [loading, setLoading] = React.useState(hasInitialSession)
+  const [loading, setLoading] = React.useState(!hasInitialSession)
 
   React.useEffect(() => {
     __NEXTAUTH._getSession = async ({ event } = {}) => {