g/ember-market-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add loading spinner to analytics charts

Browse Source 
Displays a loading spinner when analytics data is being fetched or refreshed, improving user feedback for orders, revenue, and vendor growth charts in the admin analytics component.
This commit is contained in:
g
2025-11-28 19:50:30 +00:00
parent e8670ba763
commit 3548cc3f2b
1 changed files with 15 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
components/admin/AdminAnalytics.tsx
View File

@@ -371,7 +371,11 @@ export default function AdminAnalytics() {
/> />
</div> </div>
{analyticsData?.orders?.dailyOrders && analyticsData.orders.dailyOrders.length > 0 ? ( {loading || refreshing ? (
<div className="mt-3 h-12 flex items-center justify-center">
<div className="animate-spin h-4 w-4 border-2 border-primary border-t-transparent rounded-full"></div>
</div>
) : analyticsData?.orders?.dailyOrders && analyticsData.orders.dailyOrders.length > 0 ? (
<div className="mt-3 h-12"> <div className="mt-3 h-12">
<ResponsiveContainer width="100%" height="100%"> <ResponsiveContainer width="100%" height="100%">
<RechartsBarChart data={transformChartData(analyticsData.orders.dailyOrders, 'count')} margin={{ top: 0, right: 0, left: 0, bottom: 0 }}> <RechartsBarChart data={transformChartData(analyticsData.orders.dailyOrders, 'count')} margin={{ top: 0, right: 0, left: 0, bottom: 0 }}>
@@ -406,7 +410,11 @@ export default function AdminAnalytics() {
/> />
</div> </div>
{analyticsData?.revenue?.dailyRevenue && analyticsData.revenue.dailyRevenue.length > 0 ? ( {loading || refreshing ? (
<div className="mt-3 h-12 flex items-center justify-center">
<div className="animate-spin h-4 w-4 border-2 border-primary border-t-transparent rounded-full"></div>
</div>
) : analyticsData?.revenue?.dailyRevenue && analyticsData.revenue.dailyRevenue.length > 0 ? (
<div className="mt-3 h-12"> <div className="mt-3 h-12">
<ResponsiveContainer width="100%" height="100%"> <ResponsiveContainer width="100%" height="100%">
<RechartsBarChart data={transformChartData(analyticsData.revenue.dailyRevenue, 'amount')} margin={{ top: 0, right: 0, left: 0, bottom: 0 }}> <RechartsBarChart data={transformChartData(analyticsData.revenue.dailyRevenue, 'amount')} margin={{ top: 0, right: 0, left: 0, bottom: 0 }}>
@@ -445,7 +453,11 @@ export default function AdminAnalytics() {
/> />
</div> </div>
{analyticsData?.vendors?.dailyGrowth && analyticsData.vendors.dailyGrowth.length > 0 ? ( {loading || refreshing ? (
<div className="mt-3 h-12 flex items-center justify-center">
<div className="animate-spin h-4 w-4 border-2 border-primary border-t-transparent rounded-full"></div>
</div>
) : analyticsData?.vendors?.dailyGrowth && analyticsData.vendors.dailyGrowth.length > 0 ? (
<div className="mt-3 h-12"> <div className="mt-3 h-12">
<ResponsiveContainer width="100%" height="100%"> <ResponsiveContainer width="100%" height="100%">
<RechartsBarChart data={transformChartData(analyticsData.vendors.dailyGrowth, 'count')} margin={{ top: 0, right: 0, left: 0, bottom: 0 }}> <RechartsBarChart data={transformChartData(analyticsData.vendors.dailyGrowth, 'count')} margin={{ top: 0, right: 0, left: 0, bottom: 0 }}>