@abtnode/ux 1.16.15-beta-ed0db59e → 1.16.15-beta-324519fc

package/es/blocklet/storage/item.js

@@ -1,5 +1,5 @@
-import { Box, Chip, LinearProgress, Typography } from '@mui/material';
-import React, { useEffect, useMemo, useState } from 'react';
+import { Box, Chip, LinearProgress, Typography, useMediaQuery } from '@mui/material';
+import React, { useEffect, useState } from 'react';
 import Button from '@arcblock/ux/lib/Button';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import PropTypes from 'prop-types';
@@ -55,8 +55,9 @@ import { axios } from '../../util/api';
 import { useNodeContext } from '../../contexts/node';
 import { useBlockletContext } from '../../contexts/blocklet';
 import useBlockletInfoForConnectDIDSpaces from '../../hooks/use-blocklet-info-for-connect-did-spaces';
-import { getDIDSpaceDidFromEndpoint, getSpaceBackupEndpoint, getSpaceNftDisplayUrlFromEndpoint, hasPermissionByEndpoint } from '../../util/spaces';
+import { getDIDSpaceDidFromEndpoint, getSpaceNftDisplayUrlFromEndpoint, hasPermissionByEndpoint } from '../../util/spaces';
 import PreviewSpaceNft from './preview-nft';
+import { useBlockletStorageContext } from '../../contexts/blocklet-storage';
 
 /**
  * @description
@@ -66,7 +67,6 @@ import PreviewSpaceNft from './preview-nft';
  *  progress: any,
  *  onDelete: (spaceGateway: import('./connected').SpaceGateway) => Promise<void>,
  *  onBackupNow: () => Promise<void>,
- *  refreshSpaceGateways: () => void
  * }} { spaceGateway }
  */
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -75,17 +75,15 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 function SpaceItem({
   spaceGateway,
   connected,
-  progress,
   onDelete,
   onBackupNow,
-  refreshSpaceGateways,
   ...rest
 }) {
+  const isMobile = useMediaQuery(theme => theme.breakpoints.down('md'));
   const {
     t,
     locale
   } = useLocaleContext();
-  const [loading, setLoading] = useState(false);
   /** @type {{ blocklet: import('@abtnode/client').BlockletState }} */
   const {
     blocklet
@@ -106,7 +104,17 @@ function SpaceItem({
   } = useBlockletInfoForConnectDIDSpaces({
     blocklet
   });
-  const spaceBackupEndpoint = useMemo(() => getSpaceBackupEndpoint(blocklet?.environments), [blocklet]);
+  const {
+    updateSpaceGateway,
+    backupEndpoint,
+    backupProgress
+  } = useBlockletStorageContext();
+
+  // TEST:
+  const [loading, setLoading] = useState(false);
+  // backupProgress.message = '(12/99)备份到备份到备份到备份到备';
+  // backupProgress.progress = 99;
+
   const [authorizeConnect, setAuthorizeConnect] = useState({
     open: false,
     action: 'one-click-authorization',
@@ -141,12 +149,12 @@ function SpaceItem({
     if (!connected) {
       return true;
     }
-    return hasPermissionByEndpoint(spaceBackupEndpoint);
+    return hasPermissionByEndpoint(backupEndpoint);
   }, {
-    refreshDeps: [connected, spaceBackupEndpoint, authorizeConnect?.open, loading]
+    refreshDeps: [connected, backupEndpoint, authorizeConnect?.open, loading]
   });
   const shouldDisplayConnected = connected && hasPermission;
-  const shouldDisplayBackupStrategy = connected && !loading && hasPermission;
+  const shouldDisplayBackupButton = connected && !loading && hasPermission && !spaceGateway?.loading;
   const shouldDisplayBackupProgress = connected && loading && hasPermission;
   const shouldDisplayReconnectNow = connected && !hasPermission && !hasPermissionLoading && !loading;
 
@@ -212,39 +220,17 @@ function SpaceItem({
       }));
       return;
     }
-    await nodeApi.updateBlockletSpaceGateway({
-      input: {
-        did: blocklet.meta.did,
-        where: {
-          url: spaceGateway?.url
-        },
-        spaceGateway: {
-          ...spaceGateway,
-          name: space.name ?? 'DID Space',
-          did: space.did ?? getDIDSpaceDidFromEndpoint(endpoint),
-          endpoint
-        }
-      }
-    });
-    if (spaceBackupEndpoint !== endpoint) {
-      await nodeApi.configBlocklet({
-        input: {
-          did: [blocklet.meta.did],
-          configs: [{
-            key: BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_BACKUP_ENDPOINT,
-            value: endpoint
-          }]
-        }
-      });
-    }
-    Toast.success(t('storage.spaces.connectedWithName', {
-      name: spaceGateway?.name ?? 'DID Spaces'
-    }));
+    const newSpaceGateway = {
+      ...spaceGateway,
+      name: space.name ?? 'DID Space',
+      did: space.did ?? getDIDSpaceDidFromEndpoint(endpoint),
+      endpoint
+    };
+    await updateSpaceGateway(newSpaceGateway);
     setAuthorizeConnect(preValue => ({
       ...preValue,
       open: false
     }));
-    refreshSpaceGateways();
   };
   const _onBackupNow = async () => {
     try {
@@ -261,20 +247,20 @@ function SpaceItem({
     }
   };
   useEffect(() => {
-    if (progress?.completed) {
-      if (progress?.progress === 100) {
+    if (backupProgress?.completed) {
+      if (backupProgress?.progress === 100) {
         Toast.success(t('storage.spaces.backupSuccessfully'));
-      } else if (progress?.progress === -1) {
-        Toast.error(progress?.message);
+      } else if (backupProgress?.progress === -1) {
+        Toast.error(backupProgress?.message);
       }
       setLoading(false);
-      progress.progress = 0;
-      progress.message = '';
-    } else if (progress.progress) {
+      backupProgress.progress = 0;
+      backupProgress.message = '';
+    } else if (backupProgress.progress) {
       setLoading(true);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [progress]);
+  }, [backupProgress]);
   return /*#__PURE__*/_jsxs(BoxContainer, {
     style: {
       position: 'relative'
@@ -299,7 +285,8 @@ function SpaceItem({
       }), /*#__PURE__*/_jsxs(Box, {
         className: "spaces-info",
         display: "flex",
-        flexGrow: 1,
+        flexGrow: (!isMobile || !shouldDisplayBackupProgress) && 1,
+        minWidth: "180px",
         flexDirection: shouldDisplayBackupProgress ? 'row' : 'column',
         sx: {
           marginLeft: '20px',
@@ -369,7 +356,8 @@ function SpaceItem({
         className: "spaces-backup",
         display: "flex",
         alignItems: "center",
-        children: [shouldDisplayBackupStrategy && /*#__PURE__*/_jsxs(Box, {
+        flex: isMobile && shouldDisplayBackupProgress && 1,
+        children: [shouldDisplayBackupButton && /*#__PURE__*/_jsxs(Box, {
           className: "backup-strategy",
           display: "flex",
           alignItems: "center",
@@ -403,12 +391,14 @@ function SpaceItem({
           display: "flex",
           flexDirection: "column",
           alignItems: "center",
-          minWidth: "640px",
+          minWidth: !isMobile && '640px',
+          marginLeft: isMobile && '16px',
+          width: isMobile && '360px',
           marginRight: "auto",
-          alignSelf: "end",
+          alignSelf: "flex-end",
           children: [/*#__PURE__*/_jsx(Typography, {
             color: "primary",
-            children: progress?.message
+            children: backupProgress?.message
           }), /*#__PURE__*/_jsxs(Box, {
             sx: {
               display: 'flex',
@@ -423,16 +413,16 @@ function SpaceItem({
               children: /*#__PURE__*/_jsx(LinearProgress, {
                 color: "primary",
                 variant: "determinate",
-                value: progress?.progress
+                value: backupProgress?.progress
               })
             }), /*#__PURE__*/_jsx(Box, {
               sx: {
-                minWidth: 35
+                maxWidth: '100%'
               },
               children: /*#__PURE__*/_jsxs(Typography, {
                 variant: "body2",
                 color: "text.secondary",
-                children: [progress?.progress, "%"]
+                children: [backupProgress?.progress, "%"]
               })
             })]
           })]
@@ -451,13 +441,15 @@ function SpaceItem({
         }), /*#__PURE__*/_jsx(SpaceItemAction, {
           sx: {
             marginLeft: '16px',
-            marginRight: '16px'
+            marginRight: '16px',
+            alignItems: 'flex-end',
+            justifyItems: 'flex-end'
           },
           spaceGateway: spaceGateway,
           connected: connected,
           onDelete: onDelete,
           onConnect: onConnect,
-          enableSwitchToSpace: progress?.completed || isEmpty(progress?.message)
+          enableSwitchToSpace: backupProgress?.completed || isEmpty(backupProgress?.message)
         })]
       })]
     }), /*#__PURE__*/_jsx(DidConnect, {
@@ -489,11 +481,11 @@ SpaceItem.propTypes = {
     name: PropTypes.string.isRequired,
     url: PropTypes.string.isRequired,
     endpoint: PropTypes.string.isRequired,
-    protected: PropTypes.bool
+    protected: PropTypes.bool,
+    loading: PropTypes.bool
   }).isRequired,
   connected: PropTypes.bool.isRequired,
   progress: PropTypes.any.isRequired,
-  refreshSpaceGateways: PropTypes.func.isRequired,
   onDelete: PropTypes.func,
   onBackupNow: PropTypes.func
 };

package/es/contexts/blocklet-storage.js

@@ -0,0 +1,199 @@
+import { createContext, useContext, useMemo, useState } from 'react';
+import propTypes from 'prop-types';
+import toast from '@arcblock/ux/lib/Toast';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { BLOCKLET_CONFIGURABLE_KEY } from '@blocklet/constant';
+import { useBlockletContext } from './blocklet';
+import { getSpaceBackupEndpoint } from '../util/spaces';
+import useSpaceGateways from '../hooks/use-space-gateways';
+import { useNodeContext } from './node';
+import useBackupProgress from '../hooks/use-backup-progress';
+import useBackups from '../hooks/use-backups';
+
+/**
+ * @typedef {import('../blocklet/storage/connected').SpaceGateway} SpaceGateway
+ * @typedef {import('@abtnode/client').Backup} Backup
+ */
+
+/**
+ * @typedef {{
+ *  spaceGateways: SpaceGateway[],
+ *  selectedGateway: SpaceGateway,
+ *  addSpaceGateway: (spaceGateway: SpaceGateway) => Promise<void>,
+ *  deleteSpaceGateway: (spaceGateway: SpaceGateway) => Promise<void>,
+ *  updateSpaceGateway: (spaceGateway: SpaceGateway) => Promise<void>,
+ *  refreshSpaceGateways: () => void,
+ *  spaceGatewaysLoading: boolean,
+ *  spaceGatewayIsSelected: (spaceGateway: SpaceGateway) => boolean,
+ *
+ *  backupEndpoint: string,
+ *  backupProgress: any,
+ *  backups: Backup[],
+ *  backupsLoading: boolean,
+ * }} BlockletStorageContextType
+ */
+
+/** @type {import('react').Context<BlockletStorageContextType>} */
+import { jsx as _jsx } from "react/jsx-runtime";
+const BlockletStorageContext = /*#__PURE__*/createContext({});
+const {
+  Provider,
+  Consumer
+} = BlockletStorageContext;
+function BlockletStorageProvider({
+  children
+}) {
+  const {
+    t
+  } = useLocaleContext();
+  /** @type {{ api: import('@abtnode/client') }} */
+  const {
+    api
+  } = useNodeContext();
+  /** @type {{ blocklet: import('@abtnode/client').BlockletState }} */
+  const {
+    blocklet
+  } = useBlockletContext();
+  const [spaceGatewaysLoading, setSpaceGatewaysLoading] = useState(false);
+  const [spaceGatewaysRefresh, setSpaceGatewaysRefresh] = useState(false);
+  const {
+    spaceGateways
+  } = useSpaceGateways({
+    refresh: spaceGatewaysRefresh,
+    setLoading: setSpaceGatewaysLoading
+  });
+  const backupProgress = useBackupProgress({
+    appDid: blocklet?.appDid
+  });
+  const backupEndpoint = useMemo(() => getSpaceBackupEndpoint(blocklet?.environments),
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [blocklet, spaceGatewaysRefresh]);
+  const [backupsLoading, setBackupsLoading] = useState(false);
+  const {
+    backups
+  } = useBackups({
+    deps: [backupProgress],
+    setLoading: setBackupsLoading
+  });
+  const [selectedSpaceGateway, setSelectedSpaceGateway] = useState(spaceGateways?.find(x => x.endpoint === backupEndpoint));
+
+  /**
+   * @description
+   * @param {SpaceGateway} spaceGateway
+   * @param {string} endpoint
+   *
+   */
+  const addSpaceGateway = async (spaceGateway, endpoint) => {
+    spaceGateways.push({
+      ...spaceGateway,
+      loading: true
+    });
+    await api.addBlockletSpaceGateway({
+      input: {
+        did: blocklet.meta.did,
+        spaceGateway
+      }
+    });
+    if (backupEndpoint !== endpoint) {
+      await api.configBlocklet({
+        input: {
+          did: [blocklet.meta.did],
+          configs: [{
+            key: BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_BACKUP_ENDPOINT,
+            value: endpoint
+          }]
+        }
+      });
+    }
+    refreshSpaceGateways();
+    setSelectedSpaceGateway(spaceGateway);
+  };
+
+  /**
+   * @description
+   * @param {SpaceGateway} spaceGateway
+   */
+  const deleteSpaceGateway = async spaceGateway => {
+    if (!spaceGateway) {
+      return;
+    }
+    if (spaceGateway.endpoint === backupEndpoint) {
+      toast.warning(t('storage.spaces.gateway.delete.failedForConnected'));
+      return;
+    }
+    await api.deleteBlockletSpaceGateway({
+      input: {
+        did: blocklet.meta.did,
+        spaceGatewayDid: spaceGateway?.did
+      }
+    });
+    refreshSpaceGateways();
+    setSelectedSpaceGateway(spaceGateway);
+  };
+
+  /**
+   * @description
+   * @param {SpaceGateway} spaceGateway
+   */
+  const updateSpaceGateway = async spaceGateway => {
+    await api.updateBlockletSpaceGateway({
+      input: {
+        did: blocklet.meta.did,
+        where: {
+          url: spaceGateway.url
+        },
+        spaceGateway
+      }
+    });
+    if (backupEndpoint !== spaceGateway.endpoint) {
+      await api.configBlocklet({
+        input: {
+          did: [blocklet.meta.did],
+          configs: [{
+            key: BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_BACKUP_ENDPOINT,
+            value: spaceGateway.endpoint
+          }]
+        }
+      });
+    }
+    toast.success(t('storage.spaces.connectedWithName', {
+      name: spaceGateway?.name ?? 'DID Spaces'
+    }));
+    refreshSpaceGateways();
+  };
+  const refreshSpaceGateways = () => {
+    setSpaceGatewaysRefresh(p => !p);
+  };
+
+  /**
+   * @description
+   * @param {SpaceGateway} spaceGateway
+   */
+  const spaceGatewayIsSelected = spaceGateway => spaceGateway?.endpoint === backupEndpoint;
+  return /*#__PURE__*/_jsx(Provider, {
+    value: {
+      spaceGateways,
+      selectedSpaceGateway,
+      addSpaceGateway,
+      deleteSpaceGateway,
+      updateSpaceGateway,
+      refreshSpaceGateways,
+      spaceGatewaysLoading,
+      spaceGatewayIsSelected,
+      backupEndpoint,
+      backupProgress,
+      backups,
+      backupsLoading
+    },
+    children: children
+  });
+}
+BlockletStorageProvider.propTypes = {
+  children: propTypes.any.isRequired
+};
+BlockletStorageProvider.defaultProps = {};
+function useBlockletStorageContext() {
+  const res = useContext(BlockletStorageContext);
+  return res;
+}
+export { BlockletStorageContext, BlockletStorageProvider, Consumer as BlockletStorageConsumer, useBlockletStorageContext };

package/es/hooks/use-backups.js

@@ -1,18 +1,24 @@
-import { useCallback, useState } from 'react';
-import { throttle } from 'lodash';
+import { useState } from 'react';
+import { debounce } from 'lodash';
 import { useAsyncEffect } from 'ahooks';
+import toast from '@arcblock/ux/lib/Toast';
 import { useNodeContext } from '../contexts/node';
 import { useBlockletContext } from '../contexts/blocklet';
+import { formatError } from '../util';
 
 /**
  * @description
- * @param {{ blocklet: import('@abtnode/client').BlockletState, progress: Object, loading: boolean, }} { blocklet, progress, loading }
- * @return {{backups: import('@abtnode/client').Backup[]}}
+ * @param {{ deps: any[], setLoading: (bool: boolean) => void }} { deps }
+ * @return {{ backups: import('@abtnode/client').Backup[] }}
  */
 export default function useBackups({
-  loading,
-  progress
-} = {}) {
+  deps,
+  setLoading
+} = {
+  deps: [],
+  setLoading: () => undefined
+}) {
+  /** @type {{ blocklet: import('@abtnode/client').BlockletState }} */
   const {
     blocklet
   } = useBlockletContext();
@@ -20,22 +26,35 @@ export default function useBackups({
   const {
     api
   } = useNodeContext();
+
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  const fetchBackups = useCallback(throttle(async () => {
-    const {
-      backups: data
-    } = await api.getBlockletBackups({
-      input: {
-        did: blocklet?.meta?.did
+  const fetchBackups = debounce(async () => {
+    try {
+      setLoading(true);
+      if (!blocklet) {
+        setBackups([]);
+        return;
       }
-    });
-    setBackups(data ?? []);
-  }, 2000), []);
+      const {
+        backups: data
+      } = await api.getBlockletBackups({
+        input: {
+          did: blocklet.meta.did
+        }
+      });
+      setBackups(data ?? []);
+    } catch (error) {
+      console.error(error);
+      toast.error(formatError(error));
+    } finally {
+      setLoading(false);
+    }
+  }, 2000);
 
   // eslint-disable-next-line require-await
   useAsyncEffect(async () => {
     fetchBackups();
-  }, [blocklet?.meta?.did, progress, loading]);
+  }, [blocklet?.meta?.did].concat(deps));
   return {
     backups
   };

package/es/hooks/use-space-gateways.js

@@ -0,0 +1,66 @@
+import { useState } from 'react';
+import { useAsyncEffect } from 'ahooks';
+import toast from '@arcblock/ux/lib/Toast';
+import { useNodeContext } from '../contexts/node';
+import { updateSpaceGatewaysFromDIDSpaces } from '../util/space-gateway';
+import { formatError } from '../../lib/util';
+import { useBlockletContext } from '../contexts/blocklet';
+
+/**
+ * @description
+ * @param {{
+ *  blockletDid: string,
+ *  setLoading: (bool: boolean) => void,
+ *  refresh: boolean,
+ * }} { blockletDid, setLoading = () => undefined, refreshBlocklet }
+ * @return {{
+ *  spaceGateways: Array<import('../contexts/blocklet-storage').SpaceGateway>
+ * }} {spaceGateways}
+ */
+export default function useSpaceGateways({
+  setLoading,
+  refresh
+} = {}) {
+  /** @type {{ blocklet: import('@abtnode/client').BlockletState }} */
+  const {
+    blocklet,
+    actions: {
+      refreshBlocklet
+    }
+  } = useBlockletContext();
+  const blockletDid = blocklet?.meta?.did;
+  const [spaceGateways, setSpaceGateways] = useState([]);
+  const {
+    api
+  } = useNodeContext();
+  useAsyncEffect(async () => {
+    try {
+      if (!blockletDid) {
+        setSpaceGateways([]);
+        return;
+      }
+      setLoading?.(true);
+      const {
+        spaceGateways: _spaceGateways
+      } = await api.getBlockletSpaceGateways({
+        input: {
+          did: blockletDid
+        }
+      });
+      const latestSpaceGateways = await updateSpaceGatewaysFromDIDSpaces({
+        blockletDid,
+        nodeApi: api,
+        spaceGateways: _spaceGateways
+      });
+      setSpaceGateways(latestSpaceGateways ?? []);
+    } catch (error) {
+      console.error(error);
+      toast.error(formatError(error));
+    } finally {
+      setLoading?.(false);
+    }
+  }, [blockletDid, refreshBlocklet, refresh]);
+  return {
+    spaceGateways
+  };
+}

package/es/locales/en.js

@@ -1370,7 +1370,7 @@ module.exports = {
       provideNFT: {
         title: 'Please show the DID Spaces NFT for {appName}',
         scan: 'Use your DID Wallet to scan the QR code below to allow the app {appName} show DID space NFT',
-        success: 'Operation successfully'
+        success: 'Connected successfully'
       },
       backup: {
         title: 'Backup',

package/es/locales/zh.js

@@ -1374,7 +1374,7 @@ module.exports = {
       provideNFT: {
         title: '请为 {appName} 出示 DID Spaces NFT',
         scan: '使用你的 DID Wallet 扫描下面的二维码为应用 {appName} 出示 DID Spaces NFT',
-        success: '操作成功'
+        success: '连接成功'
       },
       backup: {
         title: '备份',

package/lib/blocklet/storage/action.js

@@ -12,6 +12,7 @@ var _ArrowOutward = _interopRequireDefault(require("@mui/icons-material/ArrowOut
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ElectricBoltOutlined = _interopRequireDefault(require("@mui/icons-material/ElectricBoltOutlined"));
 var _FolderOutlined = _interopRequireDefault(require("@mui/icons-material/FolderOutlined"));
+var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
 var _spaces = require("../../util/spaces");
 var _delete = _interopRequireDefault(require("./delete"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -20,12 +21,12 @@ const _excluded = ["spaceGateway", "connected", "onDelete", "onConnect", "enable
  * @description
  * @param {{
  *  spaceGateway: import('./connected').SpaceGateway,
- *  onDelete: (import('./connected').SpaceGateway) => Promise<void>,
- *  onDelete: (import('./connected').SpaceGateway) => Promise<void>,
- *  enableSwitchToSpace: boolean,
- *  connected: boolean
- * }} { spaceGateway, onDelete, ...rest }
- * @return {*}
+ *  onDelete: (spaceGateway: import('./connected').SpaceGateway) => Promise<void>,
+ *  onConnect: (spaceGateway: import('./connected').SpaceGateway) => Promise<void>,
+ *  enableSwitchToSpace: true | false,
+ *  connected: false | true
+ * } & import('@mui/material').IconButtonProps} { spaceGateway, onDelete, onConnect, enableSwitchToSpace, connected, ...rest }
+ * @return {React.Component}
  */
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -50,6 +51,7 @@ function SpaceItemAction(_ref) {
   const {
     t
   } = (0, _context.useLocaleContext)();
+  const [loading, setLoading] = (0, _react.useState)(false);
 
   /**
    * @description
@@ -60,9 +62,17 @@ function SpaceItemAction(_ref) {
     event.preventDefault();
     setAnchorEl(open && event.currentTarget);
   };
-  const handleOnConnect = async e => {
-    handleOpen(e, false);
-    await onConnect(spaceGateway);
+  const handleOnSwitchSpace = async e => {
+    try {
+      setLoading(true);
+      handleOpen(e, false);
+      await onConnect(spaceGateway);
+    } catch (error) {
+      console.error(error);
+      _Toast.default.error(error.message);
+    } finally {
+      setLoading(false);
+    }
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, _objectSpread(_objectSpread({
@@ -73,7 +83,9 @@ function SpaceItemAction(_ref) {
       onClick: e => handleOpen(e, true),
       size: "small"
     }, rest), {}, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MoreVert.default, {})
+      children: loading || spaceGateway !== null && spaceGateway !== void 0 && spaceGateway.loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CircularProgress, {
+        size: "24px"
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_MoreVert.default, {})
     })), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Menu, {
       id: "simple-menu",
       anchorEl: anchorEl,
@@ -111,7 +123,7 @@ function SpaceItemAction(_ref) {
           children: t('storage.spaces.strategy.viewBackupFiles')
         })]
       }), !connected && enableSwitchToSpace && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
-        onClick: handleOnConnect,
+        onClick: handleOnSwitchSpace,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ListItemIcon, {
           style: {
             minWidth: 24
@@ -134,7 +146,8 @@ SpaceItemAction.propTypes = {
     name: _propTypes.default.string.isRequired,
     url: _propTypes.default.string.isRequired,
     protected: _propTypes.default.bool,
-    endpoint: _propTypes.default.string.isRequired
+    endpoint: _propTypes.default.string.isRequired,
+    loading: _propTypes.default.bool
   }).isRequired,
   connected: _propTypes.default.bool.isRequired,
   enableSwitchToSpace: _propTypes.default.bool,