diff --git a/Merge/front/src/components/PerformanceLogs.js b/Merge/front/src/components/PerformanceLogs.js
index be9eb99..00f7e7d 100644
--- a/Merge/front/src/components/PerformanceLogs.js
+++ b/Merge/front/src/components/PerformanceLogs.js
@@ -7,8 +7,10 @@
 
 function PerformanceLogs({ userId }) {
   const [data, setData] = useState([]);
+  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
+    setLoading(true);
     fetchSysCost(userId)
       .then(list => {
         const msList = list.map(item => ({
@@ -22,9 +24,40 @@
         console.log('Converted data:', msList[0]); // debug first item
         setData(msList);
       })
-      .catch(err => console.error('fetchSysCost error:', err));
+      .catch(err => console.error('fetchSysCost error:', err))
+      .finally(() => setLoading(false));
   }, [userId]);
 
+  if (loading) {
+    return (
+      <section className="dashboard-performance">
+        <div style={{ 
+          display: 'flex', 
+          justifyContent: 'center', 
+          alignItems: 'center', 
+          height: '400px',
+          flexDirection: 'column'
+        }}>
+          <div style={{
+            border: '4px solid #f3f3f3',
+            borderTop: '4px solid #3498db',
+            borderRadius: '50%',
+            width: '50px',
+            height: '50px',
+            animation: 'spin 1s linear infinite'
+          }}></div>
+          <p style={{ marginTop: '20px', color: '#666' }}>加载中...</p>
+          <style>{`
+            @keyframes spin {
+              0% { transform: rotate(0deg); }
+              100% { transform: rotate(360deg); }
+            }
+          `}</style>
+        </div>
+      </section>
+    );
+  }
+
   return (
     <section className="dashboard-performance">
       {/* 响应时间图表 */}