在这个位置可以看出因为动画的一些延迟加载footer已经先上去了导致页面屏幕的一个闪动。这个就是🌩的核心问题。
还是跑性能分析检测检测出来的

起码能把这个闪动给抓出来。

内容里有大量动画和useEffect() 会阻断的渲染，导致footer。所以footer会很正常的优先渲染。但是这个动画查看使用还是好用的。

import '../../App.css';
import { BrowserRouter } from 'react-router-dom';
import Footer from '@/components/Footer';
// import Header from '@/components/Header';
import { ConfigProvider, theme } from 'antd';
import Router from '@/router/pc/Router.tsx';
import { useEffect, useState } from 'react';

function App() {
  const [showFooter, setShowFooter] = useState(false);
  useEffect(() => {
    const timer = setTimeout(() => setShowFooter(true), 500);
    return () => clearTimeout(timer);
  }, []);
  return (
    <ConfigProvider theme={{ algorithm: theme.darkAlgorithm }}>
      <BrowserRouter basename={'/'}>
        <div className='h-full'>
          {/* <Header /> */}
          <Router />
          {showFooter && <Footer />}
        </div>
      </BrowserRouter>
    </ConfigProvider>
  );
}

export default App;