better loading in studio

CLAUDE.md

@@ -195,4 +195,6 @@ Required environment variables:
 1. 暂停思考的习惯 - 在行动前先分析现有结构
 2. 质量优先的价值观 - 宁可慢一点也要做对
 3. 整体设计思维 - 考虑代码的可维护性和一致性
-4. 优先按照最佳实践完成工作
+4. 优先按照最佳实践完成工作
+5. 完成一个模块后执行 build 查看是否有报错，确保能够成功构建后移除调试代码。
+6. 时刻保证布局友好和界面美观

src/app/studio/page.tsx

@@ -7,7 +7,7 @@ import { useRouter } from 'next/navigation'
 import { Header } from '@/components/layout/Header'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
-import { FullScreenLoading } from '@/components/ui/full-screen-loading'
+import { LoadingRing } from '@/components/ui/loading-ring'
 import { EditPromptModal } from '@/components/studio/EditPromptModal'
 import { PromptDetailModal } from '@/components/studio/PromptDetailModal'
 import { BulkAddPromptModal } from '@/components/studio/BulkAddPromptModal'
@@ -275,8 +275,8 @@ export default function StudioPage() {
   // Use server-side pagination
   const currentPrompts = filteredPrompts
 
-  if (loading || isLoading) {
-    return <FullScreenLoading isVisible={true} message={t('loadingStudio')} />
+  if (loading) {
+    return null
   }
 
   if (!user) {
@@ -418,7 +418,12 @@ export default function StudioPage() {
         </div>
 
         {/* Content */}
-        {filteredPrompts.length === 0 ? (
+        {isLoading ? (
+          <div className="text-center py-16">
+            <LoadingRing size="lg" className="mb-4" />
+            <p className="text-muted-foreground">{t('loadingStudio')}</p>
+          </div>
+        ) : filteredPrompts.length === 0 ? (
           <div className="text-center py-16">
             <div className="bg-muted/30 rounded-full w-24 h-24 flex items-center justify-center mx-auto mb-6">
               <FileText className="h-12 w-12 text-muted-foreground" />

src/components/ui/loading-ring.tsx

@@ -0,0 +1,34 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+
+interface LoadingRingProps {
+  size?: 'sm' | 'md' | 'lg'
+  className?: string
+}
+
+export function LoadingRing({ size = 'md', className }: LoadingRingProps) {
+  const sizeClasses = {
+    sm: 'w-6 h-6',
+    md: 'w-8 h-8',
+    lg: 'w-12 h-12'
+  }
+
+  return (
+    <div className={cn('flex items-center justify-center', className)}>
+      <div
+        className={cn(
+          'animate-spin rounded-full border-2 border-transparent bg-gradient-to-r from-primary to-primary/30 bg-clip-border',
+          sizeClasses[size]
+        )}
+        style={{
+          background: 'conic-gradient(from 0deg, hsl(var(--primary)) 0%, hsl(var(--primary)) 50%, transparent 50%, transparent 100%)',
+          borderRadius: '50%',
+          animation: 'spin 1s linear infinite'
+        }}
+      >
+        <div className="w-full h-full rounded-full bg-background" style={{ margin: '2px' }} />
+      </div>
+    </div>
+  )
+}