refactor: replace useQuery with useAuthQuery for improved authentication handling

- Updated multiple components to utilize useAuthQuery instead of useQuery for fetching user-related data, enhancing authentication management.
- Adjusted balance and subscription queries across various components including InitUser, ManageSubscription, PricingCards, CreditDisplay, and others to ensure consistent authentication checks.
- Improved overall code maintainability by centralizing authentication logic in the new hook.

components/canvas/canvas.tsx

@@ -236,10 +236,11 @@ function CanvasInner({ canvasId }: CanvasInnerProps) {
   const { resolvedTheme } = useTheme();
   const { data: session, isPending: isSessionPending } = authClient.useSession();
   const { isLoading: isAuthLoading, isAuthenticated } = useConvexAuth();
-  const shouldSkipCanvasQueries = isAuthLoading || !isAuthenticated;
+  const shouldSkipCanvasQueries =
+    isSessionPending || isAuthLoading || !isAuthenticated;
   const convexAuthUserProbe = useQuery(
     api.auth.safeGetAuthUser,
-    isAuthLoading ? "skip" : {},
+    shouldSkipCanvasQueries ? "skip" : {},
   );
 
   useEffect(() => {
@@ -376,7 +377,6 @@ function CanvasInner({ canvasId }: CanvasInnerProps) {
   // ─── Convex → Lokaler State Sync ──────────────────────────────
   useEffect(() => {
     if (!convexNodes || isDragging.current) return;
-    // eslint-disable-next-line react-hooks/set-state-in-effect
     setNodes((previousNodes) => {
       const incomingNodes = withResolvedCompareData(convexNodes.map(convexNodeToRF), edges);
       return mergeNodesPreservingLocalState(previousNodes, incomingNodes);
@@ -385,7 +385,6 @@ function CanvasInner({ canvasId }: CanvasInnerProps) {
 
   useEffect(() => {
     if (!convexEdges) return;
-    // eslint-disable-next-line react-hooks/set-state-in-effect
     setEdges((prev) => {
       const tempEdges = prev.filter((e) => e.className === "temp");
       const mapped = convexEdges.map(convexEdgeToRF);
@@ -398,7 +397,6 @@ function CanvasInner({ canvasId }: CanvasInnerProps) {
 
   useEffect(() => {
     if (isDragging.current) return;
-    // eslint-disable-next-line react-hooks/set-state-in-effect
     setNodes((nds) => withResolvedCompareData(nds, edges));
   }, [edges]);
 

components/canvas/credit-display.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { useMutation, useQuery } from "convex/react";
+import { useMutation } from "convex/react";
+import { useAuthQuery } from "@/hooks/use-auth-query";
 import { api } from "@/convex/_generated/api";
 import { Coins } from "lucide-react";
 import { toast } from "@/lib/toast";
@@ -27,8 +28,8 @@ const showTestCreditGrant =
   process.env.NEXT_PUBLIC_ALLOW_TEST_CREDIT_GRANT === "true";
 
 export function CreditDisplay() {
-  const balance = useQuery(api.credits.getBalance);
-  const subscription = useQuery(api.credits.getSubscription);
+  const balance = useAuthQuery(api.credits.getBalance);
+  const subscription = useAuthQuery(api.credits.getSubscription);
   const grantTestCredits = useMutation(api.credits.grantTestCredits);
 
   if (balance === undefined || subscription === undefined) {

components/canvas/nodes/prompt-node.tsx

@@ -9,7 +9,8 @@ import {
   type NodeProps,
   type Node,
 } from "@xyflow/react";
-import { useMutation, useAction, useQuery } from "convex/react";
+import { useMutation, useAction } from "convex/react";
+import { useAuthQuery } from "@/hooks/use-auth-query";
 import { api } from "@/convex/_generated/api";
 import type { Id } from "@/convex/_generated/dataModel";
 import BaseNodeWrapper from "./base-node-wrapper";
@@ -108,7 +109,7 @@ export default function PromptNode({
   const dataRef = useRef(data);
   dataRef.current = data;
 
-  const balance = useQuery(api.credits.getBalance);
+  const balance = useAuthQuery(api.credits.getBalance);
   const creditCost = getModel(DEFAULT_MODEL_ID)?.creditCost ?? 4;
 
   const availableCredits =