From 3548cc3f2bc148f8ceb5533c7dd92ee2dac2c08d Mon Sep 17 00:00:00 2001
From: g <g@paki.email>
Date: Fri, 28 Nov 2025 19:50:30 +0000
Subject: [PATCH] Add loading spinner to analytics charts

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.
---
 components/admin/AdminAnalytics.tsx | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/components/admin/AdminAnalytics.tsx b/components/admin/AdminAnalytics.tsx
index c2879d1..d1d99a8 100644
--- a/components/admin/AdminAnalytics.tsx
+++ b/components/admin/AdminAnalytics.tsx
@@ -371,7 +371,11 @@ export default function AdminAnalytics() {
               />
             </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">
                 <ResponsiveContainer width="100%" height="100%">
                   <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>
             
-            {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">
                 <ResponsiveContainer width="100%" height="100%">
                   <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>
             
-            {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">
                 <ResponsiveContainer width="100%" height="100%">
                   <RechartsBarChart data={transformChartData(analyticsData.vendors.dailyGrowth, 'count')} margin={{ top: 0, right: 0, left: 0, bottom: 0 }}>