加载 | Soybean-React

样式

系统初始化时的加载样式通过react-router-dom的HydrateFallback实现
由于react-router的HydrateFallback会透传至最外层的布局组件所以只需要最外层的布局组件使用即可
系统的 Logo 使用 SystemLogo 组件实现
系统Logo

渲染原理

创建 loading 页面, 它的主要功能是设置页面加载时的动画效果。这个加载动画包括一个系统Logo、旋转的点阵动画和标题文字，并且所有元素的颜色均基于从本地存储获取的主题色 themeColor 动态生成。并且在DOM中查找ID为root的元素作为加载动画的挂载点, 如果找到了这个元素，则将其内部HTML替换为刚刚构建的加载动画HTML结构


// @unocss-include
import { getRgb } from '@sa/color';
import clsx from 'clsx';
 
import SystemLogo from '@/components/SystemLogo';
import { DARK_CLASS } from '@/constants/app';
import { toggleHtmlClass } from '@/utils/common';
import { localStg } from '@/utils/storage';
 
const GlobalLoading = memo(() => {
  const { t } = useTranslation();
 
  const themeColor = localStg.get('themeColor') || '#646cff';
 
  const darkMode = localStg.get('darkMode') || false;
 
  if (darkMode) {
    toggleHtmlClass(DARK_CLASS).add();
  }
 
  const { b, g, r } = getRgb(themeColor);
 
  const loadingClasses = [
    'left-0 top-0',
    'left-0 bottom-0 animate-delay-500',
    'right-0 top-0 animate-delay-1000',
    'right-0 bottom-0 animate-delay-1500'
  ];
 
  return (
    <div
      className="fixed-center flex-col bg-layout"
      style={{ '--primary-color': `${r} ${g} ${b}` } as React.CSSProperties}
    >
      <SystemLogo className="size-128px text-primary" />
      <div className="my-36px h-56px w-56px">
        <div className="relative h-full animate-spin">
          {loadingClasses.map(item => {
            return (
              <div
                className={clsx('absolute w-16px h-16px bg-primary rounded-8px animate-pulse ', item)}
                key={item}
              />
            );
          })}
        </div>
      </div>
      <h2 className="text-28px text-primary font-500">{t('system.title')}</h2>
    </div>
  );
});
 
export default GlobalLoading;

Note

代码位置：src/pages/loading.tsx

最后要将 main.tsx 中创建root的render函数等待react-router接管页面


async function setupApp() {
 
  const container = document.getElementById('root');
  if (container) {
    const root = createRoot(container);
    root.render(
      <ErrorBoundary fallbackRender={FallbackRender}>
        <Provider store={store}>
          <App />
        </Provider>
      </ErrorBoundary>
    );
  } else {
    throw new Error(
      "Root element with ID 'root' was not found in the document. Ensure there is a corresponding HTML element with the ID 'root' in your HTML file."
    );
  }
}

Note

代码位置：src/main.tsx