Optimize homepage redirect UX with local session check and redirecting state

.gitignore

@@ -12,6 +12,9 @@ dist
 dist-ssr
 *.local
 
+# TypeScript build info
+*.tsbuildinfo
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json

src/hooks/isAuthenticated.tsx

@@ -2,14 +2,15 @@ import { supabase } from "@/db/supabase";
 
 export default async function isAuthenticated() {
   try {
-    const { data, error } = await supabase.auth.getUser();
+    // Use getSession() instead of getUser() for faster local check
+    const { data, error } = await supabase.auth.getSession();
 
     if (error) {
       console.error("Authentication check error:", error);
       return false;
     }
 
-    return !!data.user;
+    return !!data.session;
   } catch (error) {
     console.error("Authentication check failed:", error);
     return false;

src/hooks/useAuth.tsx

@@ -91,12 +91,13 @@ export function useAuth() {
 // Enhanced version of the original isAuthenticated function
 export async function isAuthenticated(): Promise<boolean> {
   try {
-    const { data, error } = await supabase.auth.getUser();
+    // Use getSession() instead of getUser() for faster local check
+    const { data, error } = await supabase.auth.getSession();
     if (error) {
       console.error("Error checking authentication:", error);
       return false;
     }
-    return !!data.user;
+    return !!data.session;
   } catch (error) {
     console.error("Error in isAuthenticated:", error);
     return false;

src/views/HomePage.tsx

@@ -8,6 +8,7 @@ import { useEffect, useState } from "react";
 export default function HomePage() {
   const navigate = useNavigate();
   const [loadingTimeout, setLoadingTimeout] = useState(false);
+  const [isRedirecting, setIsRedirecting] = useState(false);
 
   const { data, isLoading, error } = useQuery({
     queryKey: ["user", "authenticated"],
@@ -38,13 +39,16 @@ export default function HomePage() {
 
   useEffect(() => {
     if (data === true) {
+      setIsRedirecting(true);
       navigate({ to: "/pages" });
     }
   }, [data, navigate]);
 
   function action(authenticated: boolean) {
     if (authenticated === true) {
-      navigate({ to: "/pages" });
+      // Navigation is already handled by useEffect when data === true
+      // to show "Redirecting..." state
+      return;
     } else {
       navigate({ to: "/login", replace: true });
     }
@@ -71,8 +75,8 @@ export default function HomePage() {
             your drawings across all your devices.
           </h2>
           <Button
-            isLoading={isLoading && !loadingTimeout}
-            loadingText=""
+            isLoading={isLoading || isRedirecting}
+            loadingText={isRedirecting ? "Redirecting..." : "Loading..."}
             className="px-8 text-sm font-medium"
             size="lg"
             onClick={() => action(data ? true : false)}