@arcblock/ux 2.13.43 → 2.13.45

package/lib/AnimationWaiter/index.d.ts

@@ -42,7 +42,7 @@ declare namespace AnimationWaiter {
     namespace defaultProps {
         let animationData_1: null;
         export { animationData_1 as animationData };
-        let size_1: string;
+        let size_1: number;
         export { size_1 as size };
         let message_1: string;
         export { message_1 as message };

package/lib/AnimationWaiter/index.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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,15 +35,36 @@ 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());
   if (!Array.isArray(message)) {
     // eslint-disable-next-line no-param-reassign
     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;
@@ -108,9 +129,22 @@ export default function AnimationWaiter({
   };
   return /*#__PURE__*/_jsxs(Container, {
     ...rest,
-    children: [/*#__PURE__*/_jsx(Lottie, {
+    children: [isLoading ? /*#__PURE__*/_jsx("div", {
+      style: {
+        width: size,
+        height: size,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center'
+      },
+      children: /*#__PURE__*/_jsx(Skeleton, {
+        variant: "rounded",
+        width: size * 0.4,
+        height: size * 0.4
+      })
+    }) : /*#__PURE__*/_jsx(Lottie, {
       loop: true,
-      animationData: animationData || lottieJson,
+      animationData: animationData || defaultAnimation,
       play: true,
       speed: currentSpeed,
       style: {
@@ -158,7 +192,7 @@ AnimationWaiter.propTypes = {
 };
 AnimationWaiter.defaultProps = {
   animationData: null,
-  size: '',
+  size: 256,
   message: '',
   messageDuration: 5000,
   messageLoop: true,

package/lib/Footer/index.js

@@ -98,7 +98,9 @@ const Container = styled('div', {
   shouldForwardProp: prop => prop !== 'dark'
 })`
   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/lib/SessionUser/components/session-user-item.js

@@ -49,6 +49,7 @@ const SessionUserItem = /*#__PURE__*/forwardRef(({
           size: 36
         })
       }), /*#__PURE__*/_jsx(WalletOSIcon, {
+        color: palette.text.secondary,
         loading: sessionItem.__isDefault,
         provider: sessionItem?.extra?.provider,
         walletOS: sessionItem?.extra?.walletOS

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.13.43",
+  "version": "2.13.45",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -71,14 +71,14 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "9b65dc9fcef38218cbf4852cb31a1b76afffab33",
+  "gitHead": "5cf352046f4ca17b469e97a54d0c48205454b37c",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.13.43",
-    "@arcblock/nft-display": "^2.13.43",
-    "@arcblock/react-hooks": "^2.13.43",
+    "@arcblock/icons": "^2.13.45",
+    "@arcblock/nft-display": "^2.13.45",
+    "@arcblock/react-hooks": "^2.13.45",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@blocklet/theme": "^2.13.43",
+    "@blocklet/theme": "^2.13.45",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.0.18",
     "@iconify-icons/logos": "^1.2.36",