feat: add loading state on auth

MovieReviewComment · Mar 12, 2024 · f20a6e7 · f20a6e7
1 parent 2c134e4
commit f20a6e7
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 21 deletions.
diff --git a/ui/src/components/auth/client/sign-button.tsx b/ui/src/components/auth/client/sign-button.tsx
@@ -4,28 +4,28 @@ import Text from '@/components/common/server/text';
 import { useAuth } from '@/context/auth/auth-context';
 
 export default function SignButton() {
-  const { user, signOut, signIn } = useAuth();
+  const { user, signOut, signIn, loading } = useAuth();
 
-  if (user) {
-    return (
-      <button
-        // eslint-disable-next-line @typescript-eslint/no-misused-promises
-        onClick={async () => {
-          await signOut();
-        }}
-      >
-        <Text size="lg" weight="medium">
-          Sign Out
-        </Text>
-      </button>
-    );
-  }
+  const state = loading ? 'loading' : user ? 'signed-in' : 'signed-out';
 
   return (
-    <button onClick={() => signIn()}>
-      <Text size="lg" weight="medium">
-        Sign In
-      </Text>
-    </button>
+    // TODO: better UI for loading state
+    <div className="w-20">
+      {state === 'loading' && null}
+      {state === 'signed-in' && (
+        <button onClick={() => void signOut()}>
+          <Text size="lg" weight="medium">
+            Sign Out
+          </Text>
+        </button>
+      )}
+      {state === 'signed-out' && (
+        <button onClick={() => signIn()}>
+          <Text size="lg" weight="medium">
+            Sign In
+          </Text>
+        </button>
+      )}
+    </div>
   );
 }
diff --git a/ui/src/context/auth/auth-context.tsx b/ui/src/context/auth/auth-context.tsx
@@ -11,15 +11,19 @@ interface ContextShape {
   user?: User;
   signOut: () => Promise<void>;
   signIn: () => void;
+  loading: boolean;
 }
 
 const AuthContext = createContext<ContextShape | null>(null);
 
 export function AuthProvider({ children }: { children: ReactNode }) {
   const [user, setUser] = useState<User>();
+  const [loading, setLoading] = useState(true);
 
   const handleGetUserSelf = async () => {
+    setLoading(true);
     const user = await getUserSelf();
+    setLoading(false);
     setUser(user);
   };
 
@@ -39,7 +43,9 @@ export function AuthProvider({ children }: { children: ReactNode }) {
   const pathname = usePathname();
   useEffect(() => {
     const protect = async () => {
+      setLoading(true);
       const isLoggedIn = !!(await getUserSelf());
+      setLoading(false);
       if (!isLoggedIn) {
         // TODO: redirect to the sign-in page
         signIn();
@@ -51,7 +57,11 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     }
   }, [pathname, user]);
 
-  return <AuthContext.Provider value={{ user, signOut, signIn }}>{children}</AuthContext.Provider>;
+  return (
+    <AuthContext.Provider value={{ user, signOut, signIn, loading }}>
+      {children}
+    </AuthContext.Provider>
+  );
 }
 
 export function useAuth() {