From 242b7d1a993df735bce39ab6179af6cc4087bfb5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thor=20=E9=9B=B7=E7=A5=9E=20Schaeff?=
 <5748289+thorwebdev@users.noreply.github.com>
Date: Tue, 22 Feb 2022 12:24:41 +0800
Subject: [PATCH] fix: have isLoading wait for onUserLoadedData. (#26)

---
 CHANGELOG.md                          |  2 +-
 examples/nextjs/pages/_app.tsx        |  8 +++++---
 examples/nextjs/pages/index.tsx       |  3 ++-
 src/react/components/UserProvider.tsx | 15 ++++++++++-----
 4 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ec1b3f2f..70b2f2ae 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,6 @@
 # CHANGELOG
 
-## 1.0.7 - 2022-02-17
+## 1.1.1 - 2022-02-22
 
 - [#24](https://github.com/supabase-community/supabase-auth-helpers/pull/24): feat: onUserLoaded prop in UserProvider:
   - Added the `onUserDataLoaded` on the `UserProvider` component fro conveninet fetching of additional user data. See [the docs](./src/nextjs/README.md#loading-additional-user-data) for more details.
diff --git a/examples/nextjs/pages/_app.tsx b/examples/nextjs/pages/_app.tsx
index 5c350912..64e9c296 100644
--- a/examples/nextjs/pages/_app.tsx
+++ b/examples/nextjs/pages/_app.tsx
@@ -12,9 +12,11 @@ function MyApp({ Component, pageProps }: AppProps) {
   return (
     <UserProvider
       supabaseClient={supabaseClient}
-      onUserLoaded={async (supabaseClient) =>
-        (await supabaseClient.from('test').select('*').single()).data
-      }
+      onUserLoaded={async (supabaseClient) => {
+        // Since supabase is so fast, we need a 2s sleep here to test that it's working :D
+        await new Promise((r) => setTimeout(r, 2000));
+        return (await supabaseClient.from('test').select('*').single()).data;
+      }}
     >
       <Component {...pageProps} />
     </UserProvider>
diff --git a/examples/nextjs/pages/index.tsx b/examples/nextjs/pages/index.tsx
index 5919d27d..0b721e48 100644
--- a/examples/nextjs/pages/index.tsx
+++ b/examples/nextjs/pages/index.tsx
@@ -4,7 +4,7 @@ import type { NextPage } from 'next';
 import Link from 'next/link';
 
 const LoginPage: NextPage = () => {
-  const { user, onUserLoadedData, error } = useUser();
+  const { isLoading, user, onUserLoadedData, error } = useUser();
 
   if (!user)
     return (
@@ -27,6 +27,7 @@ const LoginPage: NextPage = () => {
         <Link href="/protected-page">supabaseServerClient</Link>]
       </p>
       <button onClick={() => supabaseClient.auth.signOut()}>Sign out</button>
+      {isLoading ? <h1>Loading...</h1> : <h1>Loaded!</h1>}
       <p>user:</p>
       <pre>{JSON.stringify(user, null, 2)}</pre>
       <p>client-side data fetching with RLS</p>
diff --git a/src/react/components/UserProvider.tsx b/src/react/components/UserProvider.tsx
index b5c57221..c77a7359 100644
--- a/src/react/components/UserProvider.tsx
+++ b/src/react/components/UserProvider.tsx
@@ -73,29 +73,34 @@ export const UserProvider = (props: Props) => {
 
   // Get cached user on every page render.
   useEffect(() => {
-    console.log(pathname);
     async function runOnPathChange() {
       setIsLoading(true);
       await checkSession();
-      setIsLoading(false);
+      if (onUserLoadedData || !onUserLoaded) {
+        setIsLoading(false);
+      }
     }
     runOnPathChange();
   }, [pathname]);
 
-  // Only load user Data when the access token changes.
+  // Only load user Data the first time after user is loaded.
   useEffect(() => {
     async function loadUserData() {
-      console.log(onUserLoaded, !onUserLoadedData, onUserLoadedData);
       if (onUserLoaded && !onUserLoadedData) {
         try {
           const response = await onUserLoaded(supabaseClient);
           setOnUserLoadedData(response);
+          setIsLoading(false);
         } catch (error) {
           console.log('Error in your `onUserLoaded` method:', error);
         }
       }
     }
-    if (user) loadUserData();
+    if (user) {
+      loadUserData();
+    } else {
+      setOnUserLoadedData(null);
+    }
   }, [user, accessToken]);
 
   useEffect(() => {