From 34b05a138b5ec0cb095a7fd9a6b081ad28abe371 Mon Sep 17 00:00:00 2001
From: suyao <sy20010504@gmail.com>
Date: Sat, 20 Sep 2025 15:58:33 +0800
Subject: [PATCH] Add loading state with spinner and i18n support to
 SessionsTab

- Replace static "No active agent" message with a spinner and loading text
- Integrate react-i18next for translation of loading message
- Adjust animation timing and styling for smoother loading state transition
---
 .../src/pages/home/Tabs/SessionsTab.tsx       | 26 +++++++++++++------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/renderer/src/pages/home/Tabs/SessionsTab.tsx b/src/renderer/src/pages/home/Tabs/SessionsTab.tsx
index b1adc7c04f..b31750a819 100644
--- a/src/renderer/src/pages/home/Tabs/SessionsTab.tsx
+++ b/src/renderer/src/pages/home/Tabs/SessionsTab.tsx
@@ -1,6 +1,8 @@
+import { Spinner } from '@heroui/react'
 import { useRuntime } from '@renderer/hooks/useRuntime'
-import { AnimatePresence,motion } from 'framer-motion'
+import { AnimatePresence, motion } from 'framer-motion'
 import { FC, memo } from 'react'
+import { useTranslation } from 'react-i18next'
 
 import Sessions from './components/Sessions'
 
@@ -9,18 +11,26 @@ interface SessionsTabProps {}
 const SessionsTab: FC<SessionsTabProps> = () => {
   const { chat } = useRuntime()
   const { activeAgentId } = chat
+  const { t } = useTranslation()
 
   return (
     <AnimatePresence mode="wait">
       {!activeAgentId ? (
         <motion.div
-          key="no-agent"
-          initial={{ opacity: 0, y: 10 }}
-          animate={{ opacity: 1, y: 0 }}
-          exit={{ opacity: 0, y: -10 }}
-          transition={{ duration: 0.2 }}
-          className="flex h-full items-center justify-center text-foreground-500">
-          No active agent.
+          key="loading"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.3 }}
+          className="flex h-full flex-col items-center justify-center gap-3">
+          <Spinner size="lg" color="primary" />
+          <motion.p
+            initial={{ opacity: 0, y: 5 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.2, duration: 0.3 }}
+            className="text-sm text-foreground-500">
+            {t('common.loading')}...
+          </motion.p>
         </motion.div>
       ) : (
         <motion.div