Enhance AnalysisPage and Loading component

- Updated AnalysisPage to improve the display of user analysis statistics, including a new message for when no data is available.
- Refactored loading states for better user experience during data analysis.
- Enhanced Loading component styles for dark mode compatibility.

src/app/components/common/Loading.tsx

@@ -18,11 +18,11 @@ const Loading: React.FC<LoadingProps> = ({ size = 'md', text }) => {
   return (
     <div className="flex flex-col items-center justify-center p-4">
       <div
-        className={`${sizeClasses[size]} animate-spin rounded-full border-4 border-gray-200 border-t-blue-600`}
+        className={`${sizeClasses[size]} animate-spin rounded-full border-4 border-gray-200 dark:border-zinc-700 border-t-blue-600 dark:border-t-blue-500`}
         role="status"
         aria-label="Loading"
       />
-      {text && <p className="mt-2 text-sm text-gray-600">{text}</p>}
+      {text && <p className="mt-2 text-sm text-gray-600 dark:text-zinc-400">{text}</p>}
     </div>
   );
 };

src/app/pages/AnalysisPage.tsx

@@ -142,26 +142,31 @@ const AnalysisPage: React.FC = () => {
     <div className="min-h-screen bg-slate-50 dark:bg-black px-4 pt-20 pb-10 transition-colors duration-200">
       <div className="mx-auto max-w-7xl space-y-6">
         {/* Statistics Section */}
-        {!isLoadingStats && userAnalysisData.length > 0 && (
-          <div className="rounded-lg border border-slate-200 dark:border-zinc-700 bg-white dark:bg-zinc-900 shadow-sm">
-            <div className="border-b border-slate-200 dark:border-zinc-700 px-6 py-4">
-              <h2 className="text-lg font-semibold text-slate-800 dark:text-white">
-                Your Analysis Statistics
-              </h2>
+        <div className="rounded-lg border border-slate-200 dark:border-zinc-700 bg-white dark:bg-zinc-900 shadow-sm">
+          <div className="border-b border-slate-200 dark:border-zinc-700 px-6 py-4">
+            <h2 className="text-lg font-semibold text-slate-800 dark:text-white">
+              Your Analysis Statistics
+            </h2>
+            <p className="text-sm text-slate-500 dark:text-zinc-400">
+              Overview of all your analyzed arguments
+            </p>
+          </div>
+
+          {isLoadingStats ? (
+            <div className="flex items-center justify-center py-12">
+              <Loading />
+            </div>
+          ) : statsError ? (
+            <div className="px-6 py-4">
+              <p className="text-sm text-red-600 dark:text-red-400">{statsError}</p>
+            </div>
+          ) : userAnalysisData.length === 0 ? (
+            <div className="px-6 py-4">
               <p className="text-sm text-slate-500 dark:text-zinc-400">
-                Overview of all your analyzed arguments
+                No analysis data available yet. Upload and analyze a CSV file to see statistics.
               </p>
             </div>
-
-            {isLoadingStats ? (
-              <div className="flex items-center justify-center py-12">
-                <Loading />
-              </div>
-            ) : statsError ? (
-              <div className="px-6 py-4">
-                <p className="text-sm text-red-600 dark:text-red-400">{statsError}</p>
-              </div>
-            ) : (
+          ) : (
               <div className="p-6 space-y-8">
                 {/* Summary Statistics */}
                 <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
@@ -241,7 +246,6 @@ const AnalysisPage: React.FC = () => {
               </div>
             )}
           </div>
-        )}
 
         {/* CSV Upload and Analysis Section */}
         <div className="rounded-lg border border-slate-200 dark:border-zinc-700 bg-white dark:bg-zinc-900 shadow-sm">
@@ -325,7 +329,13 @@ const AnalysisPage: React.FC = () => {
             </div>
           )}
 
-          {analysisResults.length > 0 && (
+          {isAnalyzing && (
+            <div className="flex items-center justify-center py-12">
+              <Loading text="Analyzing arguments..." />
+            </div>
+          )}
+
+          {!isAnalyzing && analysisResults.length > 0 && (
             <div className="overflow-hidden rounded-lg border border-slate-200 dark:border-zinc-700">
               <div className="bg-green-50 dark:bg-green-900/20 px-4 py-2 border-b border-slate-200 dark:border-zinc-700">
                 <h2 className="text-sm font-semibold text-green-800 dark:text-green-400">