fix(SubTabContainer): 移除外层 Suspense,Tab 内容直接展示

- SubTabContainer 内部为每个 Tab 添加 Suspense fallback={null}
- 移除 Company/index.tsx 外层 Suspense 和 TabLoadingFallback
- 切换一级 Tab 时不再显示整体 loading,直接展示内容

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-12-18 18:23:16 +08:00
parent 79572fcc98
commit eaa65b2328
4 changed files with 54 additions and 101 deletions

View File

@@ -9,12 +9,12 @@
* - HeroUI 现代组件风格
*/
import React, { memo, useCallback, useRef, useEffect, Suspense } from 'react';
import React, { memo, useCallback, useRef, useEffect } from 'react';
// FUI 动画样式
import './theme/fui-animations.css';
import { useSearchParams } from 'react-router-dom';
import { Box, Spinner, Center } from '@chakra-ui/react';
import { Box } from '@chakra-ui/react';
import SubTabContainer from '@components/SubTabContainer';
import { useCompanyEvents } from './hooks/useCompanyEvents';
import { useCompanyData } from './hooks/useCompanyData';
@@ -22,18 +22,6 @@ import CompanyHeader from './components/CompanyHeader';
import StockQuoteCard from './components/StockQuoteCard';
import { THEME, TAB_CONFIG } from './config';
// ============================================
// 加载状态组件
// ============================================
const TabLoadingFallback = memo(() => (
<Center py={20}>
<Spinner size="xl" color={THEME.gold} thickness="3px" />
</Center>
));
TabLoadingFallback.displayName = 'TabLoadingFallback';
// ============================================
// 主内容区组件 - FUI 风格
// ============================================
@@ -121,16 +109,14 @@ const CompanyContent = memo<CompanyContentProps>(({
opacity={0.6}
/>
<Suspense fallback={<TabLoadingFallback />}>
<SubTabContainer
tabs={TAB_CONFIG}
componentProps={{ stockCode }}
onTabChange={onTabChange}
themePreset="blackGold"
contentPadding={0}
isLazy={true}
/>
</Suspense>
<SubTabContainer
tabs={TAB_CONFIG}
componentProps={{ stockCode }}
onTabChange={onTabChange}
themePreset="blackGold"
contentPadding={0}
isLazy={true}
/>
</Box>
</Box>
));