fix: add loading state handling in credit packages

This commit is contained in:
javayhu 2025-09-04 23:46:32 +08:00
parent 3fd47869a2
commit 48c045fb73

View File

@ -12,7 +12,6 @@ import { getCreditPackages } from '@/config/credits-config';
import { websiteConfig } from '@/config/website';
import { useCurrentUser } from '@/hooks/use-current-user';
import { useCurrentPlan } from '@/hooks/use-payment';
import { authClient } from '@/lib/auth-client';
import { formatPrice } from '@/lib/formatter';
import { cn } from '@/lib/utils';
import { CircleCheckBigIcon, CoinsIcon } from 'lucide-react';
@ -32,8 +31,9 @@ export function CreditPackages() {
// Get current user and payment info
const currentUser = useCurrentUser();
const { data: session } = authClient.useSession();
const { data: paymentData } = useCurrentPlan(session?.user?.id);
const { data: paymentData, isLoading: isLoadingPayment } = useCurrentPlan(
currentUser?.id
);
const currentPlan = paymentData?.currentPlan;
// Get credit packages with translations - must be called here to maintain hook order
@ -41,6 +41,11 @@ export function CreditPackages() {
(pkg) => !pkg.disabled && pkg.price.priceId
);
// Don't render anything while loading to prevent flash
if (isLoadingPayment) {
return null;
}
// Check if user is on free plan and enablePackagesForFreePlan is false
const isFreePlan = currentPlan?.isFree === true;