import styled, { keyframes } from 'styled-components'; import useStore from '../../store/store'; const LoadingPage = () => { const { loading } = useStore(); return ( <> <LoadingContainer className={loading ? '' : 'loaded'}> {/* <Loader /> <div>Loading...</div> */} <LoadingLeft className={loading ? '' : 'loaded'} /> <LoadingRight className={loading ? '' : 'loaded'} /> <SpinnerBox className={loading ? '' : 'loaded'}> <div className='configure-border-1'> <div className='configure-core'></div> </div> <div className='configure-border-2'> <div className='configure-core'></div> </div> <div className='loading-word'>加载中...</div> </SpinnerBox> </LoadingContainer> </> ) } // 定义加载动画 const spin = keyframes` 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } `; // Loading 组件样式 const LoadingContainer = styled.div` display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; width: 100%; font-size: 24px; z-index: 999; transition: all 2s; opacity: 1; position: fixed; &.loaded { opacity: 0; position: absolute; z-index: -1001; } `; const Loader = styled.div` border: 8px solid rgba(255, 255, 255, 0.3); border-top: 8px solid white; border-radius: 50%; width: 60px; height: 60px; animation: ${spin} 1s linear infinite; `; const LoadingLeft = styled.div` position: fixed; z-index: 1000; width: 52%; height: 100%; background: #37474f; left: 0; transition: all 1s; &.loaded { transform: translate(-100%, 0); } ` const LoadingRight = styled.div` position: fixed; z-index: 1000; width: 52%; height: 100%; background: #37474f; right: 0; transition: all 1s; &.loaded { transform: translate(100%, 0); } ` const SpinnerBox = styled.div` position: fixed; z-index: 1001; opacity: 1; transition: all .3s; &.loaded { opacity: 0; } .configure-border-1 { position: absolute; padding: 3px; width: 115px; height: 115px; background: #ffab91; animation: configure-clockwise 3s ease-in-out 0s infinite alternate; .configure-core { width: 100%; height: 100%; background: #37474f; } } .configure-border-2 { left: -115px; padding: 3px; width: 115px; height: 115px; background: #3ff9dc; transform: rotate(45deg); animation: configure-xclockwise 3s ease-in-out 0s infinite alternate; .configure-core { width: 100%; height: 100%; background: #37474f; } } .loading-word { position: absolute; color: #eff; font-size: 16px; top: 50%; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; } ` export default LoadingPage出现这个bug tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used: