@abtnode/ux 1.16.44 → 1.16.45-beta-20250609-025419-7fd1f86c

package/lib/blocklet/overview.js

@@ -185,7 +185,8 @@ const useDidSpaceBackup = (backupEndpoint, backup) => {
       display: 'flex',
       alignItems: 'baseline',
       gap: 0.5,
-      color: 'warning.main'
+      color: 'warning.main',
+      fontSize: 30
     },
     children: [t('storage.spaces.backup.noBackup'), /*#__PURE__*/_jsx(Tooltip, {
       title: t('storage.spaces.backup.noBackupTip'),
@@ -369,7 +370,8 @@ export default function BlockletOverview() {
     }, row.name);
   });
   const blockletStats = useRunningBlocklets(blocklet.children);
-  const uptime = useUpTime(Number(extra?.value?.appRuntimeInfo?.uptime || 0), x => {
+  const appRuntimeUptime = Number(extra?.value?.appRuntimeInfo?.uptime || 0);
+  const uptime = useUpTime(appRuntimeUptime, x => {
     const options = {
       compact: true,
       verbose: true,
@@ -379,10 +381,10 @@ export default function BlockletOverview() {
   });
   const domains = useMemo(() => blocklet?.site?.domainAliases || [], [blocklet?.site?.domainAliases]);
   const customDomains = useMemo(() => domains.filter(domain => isCustomDomain(domain.value)), [domains]);
+  const customDomain = useCustomDomain(domains, customDomains);
   const passport = useMemo(() => extra?.value?.passport || {}, [extra?.value?.passport]);
   const user = useMemo(() => extra?.value?.user || {}, [extra?.value?.user]);
   const backupEndpoint = useMemo(() => getSpaceBackupEndpoint(blocklet?.environments), [blocklet?.environments]);
-  const customDomain = useCustomDomain(domains, customDomains);
   const didSpaceBackup = useDidSpaceBackup(backupEndpoint, extra?.value?.backup);
   const getBlockletServiceUrl = (tab, subTab) => {
     return `${WELLKNOWN_SERVICE_PATH_PREFIX}/admin/${tab}/${subTab}`;
@@ -401,6 +403,7 @@ export default function BlockletOverview() {
     }),
     url: inService ? getBlockletServiceUrl('overview', 'components') : getBlockletServerUrl('components')
   }, {
+    loading: extra?.loading,
     name: t('common.members'),
     value: `${formatNumber(user?.users || 0)}<small>${t('common.active')} ${formatNumber(user?.approvedUsers)}</small>`,
     icon: /*#__PURE__*/_jsx(Box, {
@@ -410,6 +413,7 @@ export default function BlockletOverview() {
     }),
     url: inService ? getBlockletServiceUrl('did-connect', 'members') : getBlockletServerUrl('members')
   }, {
+    loading: extra?.loading,
     name: t('team.member.passports'),
     value: `${formatNumber(passport?.passports || 0)}<small>${t('common.active')} ${formatNumber(passport?.activePassports)}</small>`,
     icon: /*#__PURE__*/_jsx(Box, {
@@ -419,6 +423,7 @@ export default function BlockletOverview() {
     }),
     url: inService ? getBlockletServiceUrl('did-connect', 'passports') : getBlockletServerUrl('passports')
   }, {
+    loading: extra?.loading,
     name: t('common.domains'),
     value: /*#__PURE__*/_jsxs(Box, {
       display: "flex",
@@ -432,8 +437,15 @@ export default function BlockletOverview() {
     }),
     url: inService ? getBlockletServiceUrl('website', 'domains') : getBlockletServerUrl('domains')
   }, {
+    loading: extra?.loading,
     name: t('common.uptime'),
-    value: blocklet?.appRuntimeInfo?.uptime ? uptime : `${t('common.waiting')}...`,
+    value: appRuntimeUptime ? uptime : /*#__PURE__*/_jsx(Box, {
+      sx: {
+        fontSize: 28,
+        color: 'text.secondary'
+      },
+      children: `${t('common.waiting')}...`
+    }),
     icon: /*#__PURE__*/_jsx(Box, {
       component: Icon,
       icon: AccessTimeRoundedIcon,
@@ -448,6 +460,7 @@ export default function BlockletOverview() {
       sx: commonIconStyle
     })
   } : null, {
+    loading: extra?.loading,
     name: /*#__PURE__*/_jsxs(Box, {
       display: "flex",
       alignItems: "baseline",

package/lib/component/metric.js

@@ -4,6 +4,7 @@ import { Box, Link } from '@mui/material';
 import PropTypes from 'prop-types';
 import { Icon } from '@iconify/react';
 import styled from '@emotion/styled';
+import Skeleton from '@mui/material/Skeleton';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export default function Metric({
   icon,
@@ -11,7 +12,8 @@ export default function Metric({
   name,
   url = '',
   animated = false,
-  LinkComponent = Link
+  LinkComponent = Link,
+  loading = false
 }) {
   const renderIcon = () => {
     if (/*#__PURE__*/React.isValidElement(icon)) {
@@ -26,6 +28,33 @@ export default function Metric({
       }
     });
   };
+  if (loading) {
+    return /*#__PURE__*/_jsxs(Container, {
+      children: [icon && /*#__PURE__*/_jsx(Box, {
+        className: "metric__image",
+        children: /*#__PURE__*/_jsx(Skeleton, {
+          variant: "circular",
+          width: 32,
+          height: 32
+        })
+      }), /*#__PURE__*/_jsxs(Box, {
+        children: [/*#__PURE__*/_jsx(Skeleton, {
+          className: `metric__number ${animated ? 'metric__number--animated' : ''}`,
+          variant: "rounded",
+          width: 160,
+          height: "36px",
+          sx: {
+            mb: 1
+          }
+        }), /*#__PURE__*/_jsx(Skeleton, {
+          className: "metric__name",
+          variant: "rounded",
+          width: 80,
+          height: 20
+        })]
+      })]
+    });
+  }
   const metric = /*#__PURE__*/_jsxs(_Fragment, {
     children: [icon && /*#__PURE__*/_jsx(Box, {
       className: "metric__image",
@@ -61,14 +90,16 @@ Metric.propTypes = {
   name: PropTypes.string.isRequired,
   url: PropTypes.string,
   animated: PropTypes.bool,
-  LinkComponent: PropTypes.elementType
+  LinkComponent: PropTypes.elementType,
+  loading: PropTypes.bool
 };
 Metric.defaultProps = {
   url: '',
   animated: false,
-  LinkComponent: Link
+  LinkComponent: Link,
+  loading: false
 };
-const Container = styled('div')`
+const Container = styled(Box)`
   border-left: 1px solid ${props => props.theme.palette.divider};
   padding: 10px 0 10px 16px;
   @media (max-width: ${props => props.theme.breakpoints.values.sm}px) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abtnode/ux",
-  "version": "1.16.44",
+  "version": "1.16.45-beta-20250609-025419-7fd1f86c",
   "description": "UX components shared across abtnode packages",
   "publishConfig": {
     "access": "public"
@@ -25,31 +25,31 @@
   "author": "linchen <linchen1987@foxmail.com> (http://github.com/linchen1987)",
   "license": "Apache-2.0",
   "dependencies": {
-    "@abtnode/auth": "1.16.44",
-    "@abtnode/constant": "1.16.44",
-    "@abtnode/docker-utils": "1.16.44",
-    "@abtnode/util": "1.16.44",
+    "@abtnode/auth": "1.16.45-beta-20250609-025419-7fd1f86c",
+    "@abtnode/constant": "1.16.45-beta-20250609-025419-7fd1f86c",
+    "@abtnode/docker-utils": "1.16.45-beta-20250609-025419-7fd1f86c",
+    "@abtnode/util": "1.16.45-beta-20250609-025419-7fd1f86c",
     "@ahooksjs/use-url-state": "^3.5.1",
-    "@arcblock/did": "1.20.13",
-    "@arcblock/did-connect": "^2.13.61",
-    "@arcblock/did-ext": "^1.20.13",
+    "@arcblock/did": "1.20.14",
+    "@arcblock/did-connect": "^2.13.62",
+    "@arcblock/did-ext": "^1.20.14",
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.13.61",
-    "@arcblock/nft-display": "^2.13.61",
-    "@arcblock/react-hooks": "^2.13.61",
-    "@arcblock/terminal": "^2.13.61",
-    "@arcblock/ux": "^2.13.61",
-    "@arcblock/validator": "1.20.13",
-    "@blocklet/constant": "1.16.44",
-    "@blocklet/did-domain-react": "^0.3.127",
-    "@blocklet/did-space-react": "^1.0.57",
+    "@arcblock/icons": "^2.13.62",
+    "@arcblock/nft-display": "^2.13.62",
+    "@arcblock/react-hooks": "^2.13.62",
+    "@arcblock/terminal": "^2.13.62",
+    "@arcblock/ux": "^2.13.62",
+    "@arcblock/validator": "1.20.14",
+    "@blocklet/constant": "1.16.45-beta-20250609-025419-7fd1f86c",
+    "@blocklet/did-domain-react": "^0.3.130",
+    "@blocklet/did-space-react": "^1.0.58",
     "@blocklet/error": "^0.2.5",
-    "@blocklet/js-sdk": "1.16.44",
-    "@blocklet/launcher-layout": "^2.13.61",
-    "@blocklet/list": "^0.16.54",
-    "@blocklet/meta": "1.16.44",
-    "@blocklet/theme": "^2.13.61",
-    "@blocklet/ui-react": "^2.13.61",
+    "@blocklet/js-sdk": "1.16.45-beta-20250609-025419-7fd1f86c",
+    "@blocklet/launcher-layout": "^2.13.62",
+    "@blocklet/list": "^0.16.55",
+    "@blocklet/meta": "1.16.45-beta-20250609-025419-7fd1f86c",
+    "@blocklet/theme": "^2.13.62",
+    "@blocklet/ui-react": "^2.13.62",
     "@blocklet/uploader": "^0.1.95",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
@@ -64,9 +64,9 @@
     "@mui/styles": "^5.15.11",
     "@mui/x-date-pickers": "^6.19.0",
     "@mui/x-tree-view": "^6.17.0",
-    "@ocap/client": "1.20.13",
-    "@ocap/mcrypto": "1.20.13",
-    "@ocap/util": "1.20.13",
+    "@ocap/client": "1.20.14",
+    "@ocap/mcrypto": "1.20.14",
+    "@ocap/util": "1.20.14",
     "@uiw/react-markdown-preview": "^5.1.1",
     "ahooks": "^3.7.8",
     "axios": "^1.7.9",
@@ -128,5 +128,5 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0"
   },
-  "gitHead": "a177f040e3e8da94311cec1395c8e8defae2da9e"
+  "gitHead": "0457b82da528653a1b903149ea1fb1966c31bee3"
 }