@arcblock/ux 2.13.43 → 2.13.44

package/src/AnimationWaiter/index.jsx

@@ -1,10 +1,11 @@
 import { useState, useEffect, useRef } from 'react';
+import { Skeleton } from '@mui/material';
+
 import PropTypes from 'prop-types';
 import Lottie from 'react-lottie-player';
 import noop from 'lodash/noop';
 
-import lottieJson from './default-animation.json';
-import { styled } from '../Theme';
+import { styled, useTheme } from '../Theme';
 
 /**
  * 用于长时间等待的用的动画组件
@@ -35,9 +36,12 @@ export default function AnimationWaiter({
   increaseSpeed,
   ...rest
 }) {
+  const theme = useTheme();
   const [tipsId, setTipsId] = useState(0);
   const [currentSpeed, setCurrentSpeed] = useState(speed);
   const [messageId, setMessageId] = useState(0);
+  const [defaultAnimation, setDefaultAnimation] = useState(null);
+  const [isLoading, setIsLoading] = useState(!animationData);
   // 动画的开始时间
   const startTime = useRef(new Date().getTime());
 
@@ -46,6 +50,29 @@ export default function AnimationWaiter({
     message = [message];
   }
 
+  // 懒加载默认动画
+  useEffect(() => {
+    if (!animationData) {
+      setIsLoading(true);
+      const loadAnimation = async () => {
+        try {
+          const module = await (theme.palette.mode === 'dark'
+            ? import('./dark-animation.json')
+            : import('./default-animation.json'));
+
+          setDefaultAnimation(module.default || module);
+
+          setIsLoading(false);
+        } catch (error) {
+          console.error('Failed to load animation:', error);
+          setIsLoading(false);
+        }
+      };
+
+      loadAnimation();
+    }
+  }, [animationData, theme.palette.mode]);
+
   useEffect(() => {
     if (!message) {
       return;
@@ -122,16 +149,22 @@ export default function AnimationWaiter({
 
   return (
     <Container {...rest}>
-      <Lottie
-        loop
-        animationData={animationData || lottieJson}
-        play
-        speed={currentSpeed}
-        style={{
-          width: size,
-          height: size,
-        }}
-      />
+      {isLoading ? (
+        <div style={{ width: size, height: size, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+          <Skeleton variant="rounded" width={size * 0.4} height={size * 0.4} />
+        </div>
+      ) : (
+        <Lottie
+          loop
+          animationData={animationData || defaultAnimation}
+          play
+          speed={currentSpeed}
+          style={{
+            width: size,
+            height: size,
+          }}
+        />
+      )}
       {message && (
         <div className="waiter-message">
           {message.map((text, index) => {
@@ -183,7 +216,7 @@ AnimationWaiter.propTypes = {
 
 AnimationWaiter.defaultProps = {
   animationData: null,
-  size: '',
+  size: 256,
   message: '',
   messageDuration: 5000,
   messageLoop: true,

package/src/Footer/index.tsx

@@ -75,7 +75,7 @@ const Container = styled('div', {
   shouldForwardProp: (prop) => prop !== 'dark',
 })<ContainerProps>`
   position: relative;
-  margin-top: 64px;
+  margin-top: ${({ theme }) => theme.spacing(2)};
   padding: 24px 0 32px;
   border-top: 1px solid ${(props) => props.theme.palette.divider};
   box-sizing: border-box;

package/src/SessionUser/components/session-user-item.tsx

@@ -47,6 +47,7 @@ const SessionUserItem = forwardRef<HTMLDivElement, SessionUserItemProps>(
             <Avatar did={sessionItem.userDid} size={36} />
           </Box>
           <WalletOSIcon
+            color={palette.text.secondary}
             loading={sessionItem.__isDefault}
             provider={sessionItem?.extra?.provider}
             walletOS={sessionItem?.extra?.walletOS}