@arcblock/ux 2.12.1 → 2.12.2

package/lib/Address/responsive-did-address.d.ts

@@ -8,7 +8,6 @@ import { HTMLDidAddressElement, IDidAddressProps } from './did-address';
  * - DidAddress 本身以 inline 形式渲染 (方便探测 did-address 的 full-width)
  * - 组件 mounted 时记录 did address 的 full-width (非 compact 模式的宽度)
  * - 监听容器宽度变化, 当容器宽度变化时, 对比容器宽度和 did address full-width, => 切换 compact 模式
- * - TODO: 初始化时, 在确定是否应该以 compact 模式渲染前, 隐藏显示, 避免闪烁问题
  */
 declare const ResponsiveDidAddress: React.ForwardRefExoticComponent<Omit<IResponsiveDidAddressProps, "ref"> & React.RefAttributes<HTMLDidAddressElement>>;
 export default ResponsiveDidAddress;

package/lib/Address/responsive-did-address.js

@@ -1,5 +1,5 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useLatest, useSize } from 'ahooks';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDebounceFn, useLatest } from 'ahooks';
 import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { Box } from '@mui/material';
 import { styled } from '../Theme';
@@ -13,22 +13,27 @@ import DidAddress from './did-address';
  * - DidAddress 本身以 inline 形式渲染 (方便探测 did-address 的 full-width)
  * - 组件 mounted 时记录 did address 的 full-width (非 compact 模式的宽度)
  * - 监听容器宽度变化, 当容器宽度变化时, 对比容器宽度和 did address full-width, => 切换 compact 模式
- * - TODO: 初始化时, 在确定是否应该以 compact 模式渲染前, 隐藏显示, 避免闪烁问题
  */
 const ResponsiveDidAddress = /*#__PURE__*/forwardRef(({
   style,
   className,
   component = 'span',
+  size,
   ...rest
 }, ref) => {
   const [compact, setCompact] = useState(false);
   const isCompact = useLatest(compact);
   // did address 完整显示时的宽度
   const [addressFullWidth, setAddressFullWidth] = useState(null);
+  const [containerWidth, setContainerWidth] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const {
+    run: delaySetLoadingFalse
+  } = useDebounceFn(() => setLoading(false), {
+    wait: 50
+  });
   const containerRef = useRef(null);
   const innerRef = useRef(null);
-  const size = useSize(containerRef);
-  const containerWidth = size?.width || 0;
   useImperativeHandle(ref, () => new Proxy({}, {
     get(target, key) {
       return innerRef.current?.[key];
@@ -38,19 +43,30 @@ const ResponsiveDidAddress = /*#__PURE__*/forwardRef(({
   // 存储完整显示时 address 组件的宽度
   useEffect(() => {
     const innerWidth = innerRef.current?.offsetWidth || 0;
-    let resizeObserver = null;
+    let innerObserver = null;
+    let containerObserver = null;
+
+    // 初始化宽度
     setAddressFullWidth(innerWidth);
+    setContainerWidth(containerRef.current?.offsetWidth);
 
     // 由于自定义字体的缘故，innerRef 的初始宽度可能发生二次改变，使用 observer 监听捕获
-    resizeObserver = new ResizeObserver(() => {
+    innerObserver = new ResizeObserver(() => {
       if (!isCompact.current && innerRef.current?.offsetWidth !== innerWidth) {
         setAddressFullWidth(innerRef.current?.offsetWidth);
+        delaySetLoadingFalse();
       }
     });
-    if (innerRef.current) {
-      resizeObserver.observe(innerRef.current.getEl());
-    }
-    return () => resizeObserver.disconnect();
+    containerObserver = new ResizeObserver(() => {
+      setContainerWidth(containerRef.current?.offsetWidth);
+    });
+    innerObserver.observe(innerRef.current.getEl());
+    containerObserver.observe(containerRef.current);
+    delaySetLoadingFalse();
+    return () => {
+      innerObserver?.disconnect();
+      containerObserver?.disconnect();
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   useEffect(() => {
@@ -58,23 +74,35 @@ const ResponsiveDidAddress = /*#__PURE__*/forwardRef(({
       setCompact(containerWidth < addressFullWidth);
     }
   }, [containerWidth, addressFullWidth]);
-  return /*#__PURE__*/_jsx(Root, {
+  return /*#__PURE__*/_jsxs(Root, {
     as: component,
     ref: containerRef,
     style: style,
     className: className,
-    children: /*#__PURE__*/_jsx(StyledDidAddress, {
+    children: [/*#__PURE__*/_jsx(StyledDidAddress, {
+      style: {
+        position: loading ? 'absolute' : 'static',
+        left: loading ? '-99999px' : 'auto'
+      },
       ...rest,
+      size: size,
       component: component,
       inline: true,
       compact: compact,
       ref: innerRef
-    })
+    }), loading && /*#__PURE__*/_jsx("div", {
+      style: {
+        width: '100%',
+        height: `${(size || 16) * 1.5}px`
+      }
+    })]
   });
 });
 export default ResponsiveDidAddress;
 const Root = styled(Box)`
   display: block;
+  width: 100%; /* flex & column & align-items: flex-start 时, 块级元素不会自动铺满容器 */
+  font-size: 0;
   overflow: hidden;
   ${({
   inline

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.12.1",
+  "version": "2.12.2",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -68,12 +68,12 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "f354d93f7db5e2e0547b75a05b5e47fd9a9587ac",
+  "gitHead": "4dc132cab82765eef5194cf00075a13bd5d8e458",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.12.1",
-    "@arcblock/nft-display": "^2.12.1",
-    "@arcblock/react-hooks": "^2.12.1",
+    "@arcblock/icons": "^2.12.2",
+    "@arcblock/nft-display": "^2.12.2",
+    "@arcblock/react-hooks": "^2.12.2",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/inter": "^5.0.16",
     "@fontsource/ubuntu-mono": "^5.0.18",

package/src/Address/responsive-did-address.tsx

@@ -1,4 +1,4 @@
-import { useLatest, useSize } from 'ahooks';
+import { useDebounceFn, useLatest } from 'ahooks';
 import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { Box } from '@mui/material';
 import { styled } from '../Theme';
@@ -12,18 +12,20 @@ import DidAddress, { HTMLDidAddressElement, IDidAddressProps } from './did-addre
  * - DidAddress 本身以 inline 形式渲染 (方便探测 did-address 的 full-width)
  * - 组件 mounted 时记录 did address 的 full-width (非 compact 模式的宽度)
  * - 监听容器宽度变化, 当容器宽度变化时, 对比容器宽度和 did address full-width, => 切换 compact 模式
- * - TODO: 初始化时, 在确定是否应该以 compact 模式渲染前, 隐藏显示, 避免闪烁问题
  */
 const ResponsiveDidAddress = forwardRef<HTMLDidAddressElement, IResponsiveDidAddressProps>(
-  ({ style, className, component = 'span', ...rest }, ref) => {
+  ({ style, className, component = 'span', size, ...rest }, ref) => {
     const [compact, setCompact] = useState(false);
     const isCompact = useLatest(compact);
     // did address 完整显示时的宽度
     const [addressFullWidth, setAddressFullWidth] = useState<number | null | undefined>(null);
+    const [containerWidth, setContainerWidth] = useState<number | null | undefined>(null);
+    const [loading, setLoading] = useState(true);
+    const { run: delaySetLoadingFalse } = useDebounceFn(() => setLoading(false), {
+      wait: 50,
+    });
     const containerRef = useRef<HTMLDivElement>(null);
     const innerRef = useRef<HTMLDidAddressElement>(null);
-    const size = useSize(containerRef);
-    const containerWidth = size?.width || 0;
 
     useImperativeHandle(
       ref,
@@ -41,22 +43,32 @@ const ResponsiveDidAddress = forwardRef<HTMLDidAddressElement, IResponsiveDidAdd
     // 存储完整显示时 address 组件的宽度
     useEffect(() => {
       const innerWidth = innerRef.current?.offsetWidth || 0;
-      let resizeObserver: ResizeObserver | null = null;
+      let innerObserver: ResizeObserver | null = null;
+      let containerObserver: ResizeObserver | null = null;
 
+      // 初始化宽度
       setAddressFullWidth(innerWidth);
+      setContainerWidth(containerRef.current?.offsetWidth);
 
       // 由于自定义字体的缘故，innerRef 的初始宽度可能发生二次改变，使用 observer 监听捕获
-      resizeObserver = new ResizeObserver(() => {
+      innerObserver = new ResizeObserver(() => {
         if (!isCompact.current && innerRef.current?.offsetWidth !== innerWidth) {
           setAddressFullWidth(innerRef.current?.offsetWidth);
+          delaySetLoadingFalse();
         }
       });
+      containerObserver = new ResizeObserver(() => {
+        setContainerWidth(containerRef.current?.offsetWidth);
+      });
 
-      if (innerRef.current) {
-        resizeObserver.observe(innerRef.current.getEl());
-      }
+      innerObserver.observe(innerRef.current!.getEl());
+      containerObserver.observe(containerRef.current!);
+      delaySetLoadingFalse();
 
-      return () => resizeObserver.disconnect();
+      return () => {
+        innerObserver?.disconnect();
+        containerObserver?.disconnect();
+      };
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
@@ -65,9 +77,23 @@ const ResponsiveDidAddress = forwardRef<HTMLDidAddressElement, IResponsiveDidAdd
         setCompact(containerWidth < addressFullWidth);
       }
     }, [containerWidth, addressFullWidth]);
+
     return (
       <Root as={component} ref={containerRef} style={style} className={className}>
-        <StyledDidAddress {...rest} component={component} inline compact={compact} ref={innerRef} />
+        <StyledDidAddress
+          style={{
+            position: loading ? 'absolute' : 'static',
+            left: loading ? '-99999px' : 'auto',
+          }}
+          {...rest}
+          size={size}
+          component={component}
+          inline
+          compact={compact}
+          ref={innerRef}
+        />
+        {/* placeholder */}
+        {loading && <div style={{ width: '100%', height: `${(size || 16) * 1.5}px` }} />}
       </Root>
     );
   }
@@ -83,6 +109,8 @@ export interface IResponsiveDidAddressProps extends IDidAddressProps {
 
 const Root = styled(Box)`
   display: block;
+  width: 100%; /* flex & column & align-items: flex-start 时, 块级元素不会自动铺满容器 */
+  font-size: 0;
   overflow: hidden;
   ${({ inline }: any) =>
     inline &&