songtianlun/prmbr-image-mksaas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance CreditPackages component with loading indicator

Browse Source
This commit is contained in:
javayhu 2025-07-10 10:54:07 +08:00
parent 04f7f891a4
commit e011d09803
1 changed files with 8 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/settings/credits/credit-packages.tsx
View File

@ -15,7 +15,7 @@ import { useLocaleRouter } from '@/i18n/navigation';
import { formatPrice } from '@/lib/formatter'; import { formatPrice } from '@/lib/formatter';
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
import { useTransactionStore } from '@/stores/transaction-store'; import { useTransactionStore } from '@/stores/transaction-store';
import { CircleCheckBigIcon, CoinsIcon } from 'lucide-react'; import { CircleCheckBigIcon, CoinsIcon, RefreshCwIcon } from 'lucide-react';
import { useTranslations } from 'next-intl'; import { useTranslations } from 'next-intl';
import { useSearchParams } from 'next/navigation'; import { useSearchParams } from 'next/navigation';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
@ -84,7 +84,7 @@ export function CreditPackages() {
return ( return (
<div className="space-y-6"> <div className="space-y-6">
<Card className="w-full"> <Card className="w-full">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardHeader className="flex flex-row items-center justify-between space-y-0">
<CardTitle className="text-lg font-semibold"> <CardTitle className="text-lg font-semibold">
{t('balance')} {t('balance')}
</CardTitle> </CardTitle>
@ -92,12 +92,14 @@ export function CreditPackages() {
<CardContent> <CardContent>
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<CoinsIcon className="h-4 w-4 text-muted-foreground" /> {/* <CoinsIcon className="h-4 w-4 text-muted-foreground" /> */}
<div className="text-2xl font-bold"> <div>
{loadingCredits ? ( {loadingCredits ? (
<span className="animate-pulse">...</span> <RefreshCwIcon className="h-8 w-8 animate-spin" />
) : ( ) : (
credits?.toLocaleString() || 0 <div className="text-2xl font-bold">
{credits?.toLocaleString() || 0}
</div>
)} )}
</div> </div>
</div> </div>