@arcblock/ux 2.5.67 → 2.6.0

package/lib/SessionManager/index.js

@@ -132,6 +132,11 @@ function SessionManager(_ref) {
       provider: key
     });
   }).filter(item => item.enabled);
+  const isFirstLoading = (0, _react.useMemo)(() => {
+    // eslint-disable-next-line react/prop-types
+    return (session === null || session === void 0 ? void 0 : session.initialized) === false && (session === null || session === void 0 ? void 0 : session.loading) === true;
+    // eslint-disable-next-line react/prop-types
+  }, [session === null || session === void 0 ? void 0 : session.initialized, session === null || session === void 0 ? void 0 : session.loading]);
   if (!session.user) {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [showText ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Button, _objectSpread(_objectSpread({
@@ -147,7 +152,7 @@ function SessionManager(_ref) {
         "aria-label": "login button"
       }, rest), {}, {
         "data-cy": "sessionManager-login",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Account.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: [isFirstLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CircularProgress, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Account.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           style: {
             lineHeight: '25px'
           },
@@ -159,7 +164,13 @@ function SessionManager(_ref) {
         onClick: _onLogin,
         "data-cy": "sessionManager-login",
         size: "medium",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Account.default, {
+        children: isFirstLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CircularProgress, {
+          style: {
+            width: size - 4,
+            height: size - 4,
+            color: dark ? '#fff' : ''
+          }
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Account.default, {
           style: {
             width: size,
             height: size,
@@ -184,7 +195,9 @@ function SessionManager(_ref) {
     setUserOpen(false);
   }
   function _onLogin() {
-    session.login(onLogin);
+    if (!isFirstLoading) {
+      session.login(onLogin);
+    }
   }
   function _onLogout() {
     session.logout(function () {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.5.67",
+  "version": "2.6.0",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -47,11 +47,11 @@
   "peerDependencies": {
     "react": ">=18.1.0"
   },
-  "gitHead": "53a99f5789cb7be993f113c89a4213c04e8a48a6",
+  "gitHead": "e6daf0f39a887fc6f13e19b0a3f2d7847f498095",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.5.67",
-    "@arcblock/react-hooks": "^2.5.67",
+    "@arcblock/icons": "^2.6.0",
+    "@arcblock/react-hooks": "^2.6.0",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",

package/src/SessionManager/index.jsx

@@ -2,7 +2,7 @@
 /* eslint-disable react/jsx-no-bind */
 import { useMemo, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import { IconButton, MenuList, MenuItem, SvgIcon, Button, Chip } from '@mui/material';
+import { IconButton, MenuList, MenuItem, SvgIcon, Button, Chip, CircularProgress } from '@mui/material';
 import AccountIcon from '@arcblock/icons/lib/Account';
 import ShieldCheck from 'mdi-material-ui/ShieldCheck';
 import OpenInIcon from '@arcblock/icons/lib/OpenIn';
@@ -104,6 +104,12 @@ function SessionManager({
     })
     .filter((item) => item.enabled);
 
+  const isFirstLoading = useMemo(() => {
+    // eslint-disable-next-line react/prop-types
+    return session?.initialized === false && session?.loading === true;
+    // eslint-disable-next-line react/prop-types
+  }, [session?.initialized, session?.loading]);
+
   if (!session.user) {
     return (
       <>
@@ -116,12 +122,16 @@ function SessionManager({
             aria-label="login button"
             {...rest}
             data-cy="sessionManager-login">
-            <AccountIcon />
+            {isFirstLoading ? <CircularProgress /> : <AccountIcon />}
             <span style={{ lineHeight: '25px' }}>{translation.connect}</span>
           </Button>
         ) : (
           <IconButton ref={userAnchorRef} {...rest} onClick={_onLogin} data-cy="sessionManager-login" size="medium">
-            <AccountIcon style={{ width: size, height: size, color: dark ? '#fff' : '' }} />
+            {isFirstLoading ? (
+              <CircularProgress style={{ width: size - 4, height: size - 4, color: dark ? '#fff' : '' }} />
+            ) : (
+              <AccountIcon style={{ width: size, height: size, color: dark ? '#fff' : '' }} />
+            )}
           </IconButton>
         )}
 
@@ -142,7 +152,9 @@ function SessionManager({
   }
 
   function _onLogin() {
-    session.login(onLogin);
+    if (!isFirstLoading) {
+      session.login(onLogin);
+    }
   }
   function _onLogout() {
     session.logout((...args) => {