diff --git a/jsconfig.json b/jsconfig.json
index 827a2714..a03e0f1c 100644
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -5,6 +5,7 @@
     "experimentalDecorators": true,
     "paths": {
       "@/*": ["./src/*"],
+      "client/*": ["./src/client/*"],
       "src/*": ["./src/*"],
       "asset/*": ["./src/asset/*"],
       "image/*": ["./src/asset/image/*"],
diff --git a/src/components/TableButton/RuleButton.jsx b/src/components/TableButton/RuleButton.jsx
index 3fd83769..5f3e3962 100644
--- a/src/components/TableButton/RuleButton.jsx
+++ b/src/components/TableButton/RuleButton.jsx
@@ -17,6 +17,10 @@ import TableButton from 'components/TableButton';
 import { getSelfColumns } from 'resources/security-group-rule';
 
 export default class RuleButton extends Component {
+  getUrl(path, adminStr) {
+    return this.isAdminPage ? `${path}${adminStr || '-admin'}` : path;
+  }
+
   render() {
     const { item: { security_group_rules: datas = [] } = {} } = this.props;
     const configs = {
diff --git a/src/pages/network/containers/VirtualAdapter/Detail/SecurityGroups/index.jsx b/src/pages/network/containers/VirtualAdapter/Detail/SecurityGroups/index.jsx
index a5b8be4a..d70cce7e 100644
--- a/src/pages/network/containers/VirtualAdapter/Detail/SecurityGroups/index.jsx
+++ b/src/pages/network/containers/VirtualAdapter/Detail/SecurityGroups/index.jsx
@@ -124,7 +124,6 @@ export default class SecurityGroup extends React.Component {
 
   render() {
     const { security_groups } = this.store;
-
     return (
       <div className={classnames(styles.wrapper, this.className)}>
         {this.isAdminPage ? null : (
@@ -136,8 +135,8 @@ export default class SecurityGroup extends React.Component {
             />
           </div>
         )}
-        {security_groups.data && security_groups.data.length !== 0 ? (
-          <Spin spinning={security_groups.isLoading}>
+        <Spin spinning={security_groups.isLoading}>
+          {security_groups.data && security_groups.data.length !== 0 ? (
             <Collapse
               className={styles.collapse}
               accordion
@@ -150,13 +149,13 @@ export default class SecurityGroup extends React.Component {
                 this.renderPanel(item, index)
               )}
             </Collapse>
-          </Spin>
-        ) : (
-          <Empty
-            image={Empty.PRESENTED_IMAGE_SIMPLE}
-            style={{ backgroundColor: 'white', padding: '32px 0' }}
-          />
-        )}
+          ) : (
+            <Empty
+              image={Empty.PRESENTED_IMAGE_SIMPLE}
+              style={{ backgroundColor: 'white', padding: '32px 0' }}
+            />
+          )}
+        </Spin>
       </div>
     );
   }