feat: Adding a Loading state to buttons

web/cypress/e2e/route/batch-delete-route.cy.js

@@ -72,6 +72,7 @@ context('Create and Batch Deletion Routes', () => {
       // config label
       cy.contains('Manage').click();
 
+      // eslint-disable-next-line @typescript-eslint/no-loop-func
       cy.get(selector.drawerBody).within(($drawer) => {
         cy.wrap($drawer)
           .contains('button', 'Add')
@@ -115,14 +116,15 @@ context('Create and Batch Deletion Routes', () => {
   it('should batch delete the name of the route', function () {
     cy.contains('Route').click();
     const cases = [
-      [1, 0, 2], //full match
+      [1, 0, 2], // full match
       [0, 1, 2], // partial match
-      [0, 1, 2], //none match
+      [0, 1, 2], // none match
     ];
     const prefix = 'test';
     cy.wrap([0, 2, 'x']).each(($n, i) => {
       cy.get(selector.nameSearchInput).clear().type(`${prefix}${$n}`);
       cy.contains('Search').click();
+      // eslint-disable-next-line @typescript-eslint/no-shadow
       cy.wrap(cases[i]).each(($n) => {
         cy.contains(`${prefix}${$n}`).should('not.exist');
       });
@@ -132,14 +134,15 @@ context('Create and Batch Deletion Routes', () => {
   it('should batch delete the path of the route', function () {
     cy.contains('Route').click();
     const cases = [
-      [1, 0, 2], //full match
+      [1, 0, 2], // full match
       [0, 1, 2], // partial match
-      [0, 1, 2], //none match
+      [0, 1, 2], // none match
     ];
     const prefix = '/get';
     cy.wrap([0, 2, 'x']).each(($n, i) => {
       cy.get(selector.nameSearchInput).clear().type(`${prefix}${$n}`);
       cy.contains('Search').click();
+      // eslint-disable-next-line @typescript-eslint/no-shadow
       cy.wrap(cases[i]).each(($n) => {
         cy.contains(`${prefix}${$n}`).should('not.exist');
       });

web/cypress/e2e/route/create-route-with-search-service-and-set-priority.cy.js

@@ -156,6 +156,7 @@ context('Create Route with search service name', () => {
   it('should delete the route and services', function () {
     cy.visit('/');
     cy.contains('Route').click();
+    cy.wait(4000);
     cy.get(selector.name).type(`${data.routeName}\n`);
     cy.contains(data.routeName).siblings().contains('More').click();
     cy.contains('Delete').click();
@@ -171,7 +172,7 @@ context('Create Route with search service name', () => {
     cy.contains(data.serviceName).siblings().contains('Delete').click();
     cy.contains('button', 'Confirm').click();
     cy.get(selector.notification).should('contain', data.deleteServiceSuccess);
-
+    cy.get('.ant-notification-close-icon').click().should('not.exist');
     cy.contains(data.serviceName2).siblings().contains('Delete').click();
     cy.contains('button', 'Confirm').click();
     cy.get(selector.notification).should('contain', data.deleteServiceSuccess);

web/package.json

@@ -60,6 +60,7 @@
     "@rjsf/antd": "2.2.0",
     "@rjsf/core": "2.2.0",
     "@types/js-yaml": "^4.0.0",
+    "ahooks": "^3.7.1",
     "ajv": "^7.0.3",
     "ajv-formats": "^1.5.1",
     "antd": "^4.4.0",

web/src/components/ActionBar/ActionBar.tsx

@@ -24,6 +24,7 @@ type Props = {
   lastStep: number;
   onChange: (nextStep: number) => void;
   withResultView?: boolean;
+  loading?: boolean;
 };
 
 const style: CSSProperties = {
@@ -37,7 +38,7 @@ const style: CSSProperties = {
   width: '100%',
 };
 
-const ActionBar: React.FC<Props> = ({ step, lastStep, onChange, withResultView }) => {
+const ActionBar: React.FC<Props> = ({ step, lastStep, onChange, withResultView, loading }) => {
   const { formatMessage } = useIntl();
 
   if (step > lastStep && !withResultView) {
@@ -59,7 +60,7 @@ const ActionBar: React.FC<Props> = ({ step, lastStep, onChange, withResultView }
           </Button>
         </Col>
         <Col>
-          <Button type="primary" onClick={() => onChange(step + 1)}>
+          <Button type="primary" onClick={() => onChange(step + 1)} loading={loading}>
             {step < lastStep
               ? formatMessage({ id: 'component.actionbar.button.nextStep' })
               : formatMessage({ id: 'component.global.submit' })}

web/src/pages/Consumer/Create.tsx

@@ -25,6 +25,7 @@ import PluginPage from '@/components/Plugin';
 import Step1 from './components/Step1';
 import Preview from './components/Preview';
 import { fetchItem, create, update } from './service';
+import { useRequest } from 'ahooks';
 
 const Page: React.FC = (props) => {
   const [step, setStep] = useState(1);
@@ -43,10 +44,14 @@ const Page: React.FC = (props) => {
     }
   }, []);
 
+  const { runAsync: createConsumers, loading: submitLoading } = useRequest(create, {
+    manual: true,
+  });
+
   const onSubmit = () => {
     const data = { ...form1.getFieldsValue(), plugins } as ConsumerModule.Entity;
     const { username } = (props as any).match.params;
-    (username ? update(username, data) : create(data))
+    (username ? update(username, data) : createConsumers(data))
       .then(() => {
         notification.success({
           message: `${
@@ -103,7 +108,7 @@ const Page: React.FC = (props) => {
           {step === 3 && <Preview form1={form1} plugins={plugins} />}
         </Card>
       </PageContainer>
-      <ActionBar step={step} lastStep={3} onChange={onStepChange} />
+      <ActionBar loading={submitLoading} step={step} lastStep={3} onChange={onStepChange} />
     </>
   );
 };

web/src/pages/Consumer/List.tsx

@@ -38,7 +38,7 @@ const Page: React.FC = () => {
   const [id, setId] = useState('');
   const [editorMode, setEditorMode] = useState<'create' | 'update'>('create');
   const { paginationConfig, savePageList, checkPageList } = usePagination();
-
+  const [consumerId, setConsumerId] = useState<string>('');
   const columns: ProColumns<ConsumerModule.ResEntity>[] = [
     {
       title: formatMessage({ id: 'page.consumer.username' }),
@@ -92,15 +92,20 @@ const Page: React.FC = () => {
             okText={formatMessage({ id: 'component.global.confirm' })}
             cancelText={formatMessage({ id: 'component.global.cancel' })}
             onConfirm={() => {
-              remove(record.username).then(() => {
-                notification.success({
-                  message: `${formatMessage({ id: 'component.global.delete.consumer.success' })}`,
+              setConsumerId(record.id);
+              remove(record.username)
+                .then(() => {
+                  notification.success({
+                    message: `${formatMessage({ id: 'component.global.delete.consumer.success' })}`,
+                  });
+                  checkPageList(ref);
+                })
+                .finally(() => {
+                  setConsumerId('');
                 });
-                checkPageList(ref);
-              });
             }}
           >
-            <Button type="primary" danger>
+            <Button type="primary" danger loading={record.id === consumerId}>
               {formatMessage({ id: 'component.global.delete' })}
             </Button>
           </Popconfirm>

web/src/pages/Plugin/List.tsx

@@ -36,6 +36,7 @@ const Page: React.FC = () => {
   const [pluginList, setPluginList] = useState<PluginComponent.Meta[]>([]);
   const [name, setName] = useState('');
   const { paginationConfig, savePageList, checkPageList } = usePagination();
+  const [pluginId, setPluginId] = useState<string>('');
 
   useEffect(() => {
     fetchPluginList().then(setPluginList);
@@ -79,19 +80,24 @@ const Page: React.FC = () => {
               title={formatMessage({ id: 'component.global.popconfirm.title.delete' })}
               onConfirm={() => {
                 const plugins = omit(initialData, [`${record.name}`]);
-                createOrUpdate({ plugins }).then(() => {
-                  notification.success({
-                    message: formatMessage({ id: 'page.plugin.delete' }),
+                setPluginId(record.id);
+                createOrUpdate({ plugins })
+                  .then(() => {
+                    notification.success({
+                      message: formatMessage({ id: 'page.plugin.delete' }),
+                    });
+                    checkPageList(ref);
+                    setInitialData(plugins);
+                    setName('');
+                  })
+                  .finally(() => {
+                    setPluginId('');
                   });
-                  checkPageList(ref);
-                  setInitialData(plugins);
-                  setName('');
-                });
               }}
               okText={formatMessage({ id: 'component.global.confirm' })}
               cancelText={formatMessage({ id: 'component.global.cancel' })}
             >
-              <Button type="primary" danger>
+              <Button type="primary" danger loading={record.id === pluginId}>
                 {formatMessage({ id: 'component.global.delete' })}
               </Button>
             </Popconfirm>

web/src/pages/Proto/List.tsx

@@ -40,6 +40,7 @@ const Page: React.FC = () => {
   };
   const [protoData, setProtoData] = useState<ProtoModule.ProtoData>(emptyProtoData);
   const [editMode, setEditMode] = useState<ProtoModule.EditMode>('create');
+  const [deleteLoading, setDeleteLoading] = useState('');
 
   const refreshTable = () => {
     ref.current?.reload();
@@ -97,15 +98,20 @@ const Page: React.FC = () => {
             okText={formatMessage({ id: 'page.proto.list.confirm' })}
             cancelText={formatMessage({ id: 'page.proto.list.cancel' })}
             onConfirm={() => {
-              remove(record.id).then(() => {
-                notification.success({
-                  message: formatMessage({ id: 'page.proto.list.delete.successfully' }),
+              setDeleteLoading(record.id);
+              remove(record.id)
+                .then(() => {
+                  notification.success({
+                    message: formatMessage({ id: 'page.proto.list.delete.successfully' }),
+                  });
+                  checkPageList(ref);
+                })
+                .finally(() => {
+                  setDeleteLoading('');
                 });
-                checkPageList(ref);
-              });
             }}
           >
-            <Button type="primary" danger>
+            <Button type="primary" danger loading={record.id === deleteLoading}>
               {formatMessage({ id: 'page.proto.list.delete' })}
             </Button>
           </Popconfirm>

web/src/pages/Proto/components/ProtoDrawer/index.tsx

@@ -22,6 +22,7 @@ import { Input } from 'antd';
 
 import { create, update } from '../../service';
 import styles from './index.less';
+import { useRequest, useThrottleFn } from 'ahooks';
 
 const ProtoDrawer: React.FC<ProtoModule.ProtoDrawerProps> = ({
   protoData,
@@ -38,11 +39,13 @@ const ProtoDrawer: React.FC<ProtoModule.ProtoDrawerProps> = ({
     form.setFieldsValue(protoData);
   }, [visible]);
 
-  const submit = async () => {
+  const { runAsync: createProto, loading: submitLoading } = useRequest(create, { manual: true });
+
+  const { run: submit } = useThrottleFn(async () => {
     await form.validateFields();
     const formData: ProtoModule.ProtoData = form.getFieldsValue(true);
     if (editMode === 'create') {
-      create(formData).then(() => {
+      createProto(formData).then(() => {
         notification.success({
           message: formatMessage({ id: 'page.proto.drawer.create.successfully' }),
         });
@@ -57,7 +60,7 @@ const ProtoDrawer: React.FC<ProtoModule.ProtoDrawerProps> = ({
       setVisible(false);
       refreshTable();
     }
-  };
+  });
 
   return (
     <Drawer
@@ -81,7 +84,7 @@ const ProtoDrawer: React.FC<ProtoModule.ProtoDrawerProps> = ({
             {formatMessage({ id: 'component.global.cancel' })}
           </Button>
           <Space>
-            <Button type="primary" onClick={() => submit()}>
+            <Button type="primary" onClick={() => submit()} loading={submitLoading}>
               {formatMessage({ id: 'component.global.submit' })}
             </Button>
           </Space>

web/src/pages/Route/Create.tsx

@@ -19,7 +19,7 @@ import { Card, Steps, Form, Modal } from 'antd';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import { history, useIntl } from 'umi';
 import { isEmpty } from 'lodash';
-
+import { useRequest } from 'ahooks';
 import ActionBar from '@/components/ActionBar';
 import FlowGraph from '@/components/PluginFlow/components/FlowGraph';
 
@@ -226,6 +226,8 @@ const Page: React.FC<Props> = (props) => {
     return true;
   };
 
+  const { runAsync: createRoutes, loading: submitLoading } = useRequest(create, { manual: true });
+
   const onStepChange = (nextStep: number) => {
     const onUpdateOrCreate = () => {
       const routeData = {
@@ -234,18 +236,17 @@ const Page: React.FC<Props> = (props) => {
         step3Data,
         advancedMatchingRules,
       } as RouteModule.RequestData;
-
-      const { path } = props.route
+      const { path } = props.route;
 
       if (path.indexOf('edit') !== -1) {
         update((props as any).match.params.rid, routeData).then(() => {
           setStep(5);
         });
       } else {
         if (path.indexOf('duplicate') !== -1) {
-          delete routeData.form1Data.id
+          delete routeData.form1Data.id;
         }
-        create(routeData).then(() => {
+        createRoutes(routeData).then(() => {
           setStep(5);
         });
       }
@@ -318,7 +319,13 @@ const Page: React.FC<Props> = (props) => {
           {renderStepList()}
         </Card>
       </PageHeaderWrapper>
-      <ActionBar step={step} lastStep={redirect ? 2 : 4} onChange={onStepChange} withResultView />
+      <ActionBar
+        step={step}
+        loading={submitLoading}
+        lastStep={redirect ? 2 : 4}
+        onChange={onStepChange}
+        withResultView
+      />
     </>
   );
 };