.refine progressbar audio quality analyzer

frontend/src/components/AudioAnalysis.tsx

@@ -148,7 +148,7 @@ export function AudioAnalysis({ result, analyzing, onAnalyze, showAnalyzeButton
                                 <p className="text-xs font-semibold tracking-wider text-muted-foreground uppercase">Spectrum Meta</p>
                                 <ul className="text-sm space-y-1">
                                     <li className="flex justify-between">
-                                        <span className="text-muted-foreground">Analysis Frames:</span>
+                                        <span className="text-muted-foreground">Display Frames:</span>
                                         <span className="font-medium font-mono">{frames.toLocaleString()}</span>
                                     </li>
                                     <li className="flex justify-between">

frontend/src/components/AudioAnalysisPage.tsx

@@ -1,5 +1,6 @@
 import { useState, useCallback, useRef, useEffect, type ChangeEvent, type DragEvent, type CSSProperties } from "react";
 import { Button } from "@/components/ui/button";
+import { Progress } from "@/components/ui/progress";
 import { Upload, ArrowLeft, Trash2, Download } from "lucide-react";
 import { AudioAnalysis } from "@/components/AudioAnalysis";
 import { SpectrumVisualization } from "@/components/SpectrumVisualization";
@@ -37,12 +38,14 @@ function fileNameFromPath(filePath: string): string {
 export function AudioAnalysisPage({ onBack }: AudioAnalysisPageProps) {
     const {
         analyzing,
+        analysisProgress,
         result,
         analyzeFile,
         analyzeFilePath,
         clearResult,
         selectedFilePath,
         spectrumLoading,
+        spectrumProgress,
         reAnalyzeSpectrum,
     } = useAudioAnalysis();
 
@@ -229,9 +232,14 @@ export function AudioAnalysisPage({ onBack }: AudioAnalysisPageProps) {
             )}
 
             {analyzing && !result && (
-                <div className="flex flex-col items-center justify-center py-16">
-                    <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mb-4"></div>
-                    <p className="text-sm text-muted-foreground">Analyzing audio file...</p>
+                <div className="flex h-[400px] items-center justify-center">
+                    <div className="w-full max-w-md space-y-2">
+                        <div className="flex items-center justify-between text-sm text-muted-foreground">
+                            <span>Processing...</span>
+                            <span className="tabular-nums">{analysisProgress.percent}%</span>
+                        </div>
+                        <Progress value={analysisProgress.percent} className="h-2 w-full" />
+                    </div>
                 </div>
             )}
 
@@ -252,6 +260,7 @@ export function AudioAnalysisPage({ onBack }: AudioAnalysisPageProps) {
                         fileName={fileName}
                         onReAnalyze={reAnalyzeSpectrum}
                         isAnalyzingSpectrum={spectrumLoading}
+                        spectrumProgress={spectrumProgress}
                     />
                 </div>
             )}

frontend/src/components/SpectrumVisualization.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState, forwardRef, useImperativeHandle } from "react";
 import type { SpectrumData } from "@/types/api";
 import { Label } from "@/components/ui/label";
+import { Progress } from "@/components/ui/progress";
 import {
     loadAudioAnalysisPreferences,
     saveAudioAnalysisPreferences,
@@ -27,6 +28,10 @@ interface SpectrumVisualizationProps {
     fileName?: string;
     onReAnalyze?: (fftSize: number, windowFunction: string) => void;
     isAnalyzingSpectrum?: boolean;
+    spectrumProgress?: {
+        percent: number;
+        message: string;
+    };
 }
 
 type ColorScheme = AnalyzerColorScheme;
@@ -489,6 +494,7 @@ export const SpectrumVisualization = forwardRef<SpectrumVisualizationHandle, Spe
     fileName,
     onReAnalyze,
     isAnalyzingSpectrum,
+    spectrumProgress,
 }, ref) => {
     const canvasRef = useRef<HTMLCanvasElement>(null);
     const preferencesRef = useRef(loadAudioAnalysisPreferences());
@@ -565,6 +571,8 @@ export const SpectrumVisualization = forwardRef<SpectrumVisualizationHandle, Spe
         }
     };
 
+    const spectrumPercent = Math.round(Math.max(0, Math.min(100, spectrumProgress?.percent ?? 0)));
+
     return (
         <div className="space-y-4">
             <div className="flex flex-wrap items-center gap-3 sm:gap-4 p-1">
@@ -638,9 +646,14 @@ export const SpectrumVisualization = forwardRef<SpectrumVisualizationHandle, Spe
 
             <div className="relative border border-white/10 rounded-lg overflow-hidden bg-black shadow-xl">
                 {isAnalyzingSpectrum && (
-                    <div className="absolute inset-0 bg-black/60 flex flex-col items-center justify-center z-10 backdrop-blur-sm">
-                        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mb-2"></div>
-                        <p className="text-sm text-foreground">Re-analyzing spectrum...</p>
+                    <div className="absolute inset-0 z-10 grid place-items-center bg-black/60 backdrop-blur-sm">
+                        <div className="w-full max-w-xs space-y-2 px-4">
+                            <div className="flex items-center justify-between text-sm text-foreground/90">
+                                <span>Processing...</span>
+                                <span className="tabular-nums">{spectrumPercent}%</span>
+                            </div>
+                            <Progress value={spectrumPercent} className="h-2 w-full" />
+                        </div>
                     </div>
                 )}
                 <canvas