feat: Adding a Loading state to buttons

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

@@ -63,36 +63,38 @@ context('Create and Batch Deletion Routes', () => {
     for (let i = 0; i < 3; i += 1) {
       cy.wait(timeout);
       cy.get('.ant-pro-table-list-toolbar-right').contains('Create').click();
-      cy.get('.ant-row').contains('Next').click().click();
       cy.get(selector.name).type(`test${i}`);
       cy.get(selector.description).type(`desc${i}`);
       cy.get(selector.hosts_0).type(data.host1);
       cy.get(selector.uris_0).clear().type(`/get${i}`);
-
       // 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')
           .should('not.be.disabled')
-          .click()
+          .click({ force: true })
           .then(() => {
             cy.get(selector.labels_0_labelKey).type(`label${i}`);
             cy.get(selector.labels_0_labelValue).type(`value${i}`);
-            cy.contains('Confirm').click();
+            cy.contains('Confirm').click({ force: true });
           });
       });
 
-      cy.contains('button', 'Next').should('not.be.disabled').click();
+      cy.get('.ant-row').contains('Next').click({ force: true });
+
       cy.get(selector.nodes_0_host).type(data.host2, {
         timeout,
       });
       cy.get(selector.nodes_0_port).type(data.port);
       cy.get(selector.nodes_0_weight).type(data.weight);
+
       cy.get('.ant-row').contains('Next').click();
       cy.get('.ant-row').contains('Next').click();
       cy.get('.ant-row').contains('Submit').click();
+      // cy.contains('button', 'Next').should('not.be.disabled').click();
+
       cy.contains(data.submitSuccess);
       cy.contains('Goto List').click();
       cy.url().should('contains', 'routes/list');
@@ -115,33 +117,33 @@ 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();
-      cy.wrap(cases[i]).each(($n) => {
-        cy.contains(`${prefix}${$n}`).should('not.exist');
+      cy.wrap(cases[i]).each(($m) => {
+        cy.contains(`${prefix}${$m}`).should('not.exist');
       });
     });
   });
 
   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();
-      cy.wrap(cases[i]).each(($n) => {
-        cy.contains(`${prefix}${$n}`).should('not.exist');
+      cy.wrap(cases[i]).each(($m) => {
+        cy.contains(`${prefix}${$m}`).should('not.exist');
       });
     });
   });

web/cypress/e2e/route/create-route-both-use-uri-uris.cy.js

@@ -72,7 +72,7 @@ context('Create Route Both use uri and uris', () => {
     cy.contains('Route').click();
     cy.get(selector.empty).should('be.visible');
     cy.contains('Create').click();
-    cy.contains('Next').click().click();
+    cy.contains('Next').click();
     cy.get(selector.name).type(data.name);
     cy.get(selector.description).type(data.description);
 

web/cypress/e2e/route/create-route-with-advanced-matching-conditions.cy.js

@@ -70,7 +70,7 @@ context('Create Route with advanced matching conditions', () => {
   it('should create route with advanced matching conditions', function () {
     cy.visit('/routes/list');
     cy.contains('Create').click();
-    cy.contains('Next').click().click();
+    cy.contains('Next').click();
     cy.get(selector.name).type(data.routeName);
 
     // All Of Operational Character Should Exist And Can be Created
@@ -162,7 +162,9 @@ context('Create Route with advanced matching conditions', () => {
     cy.contains('Next').click();
     cy.get(selector.nodes_0_port).focus();
     cy.contains('Next').click();
+    cy.wait(2000);
     cy.contains('Next').click();
+    cy.wait(2000);
     cy.contains('Submit').click();
     cy.contains(data.submitSuccess);
     cy.contains('Goto List').click();
@@ -185,7 +187,9 @@ context('Create Route with advanced matching conditions', () => {
     cy.contains('Next').click();
     cy.get(selector.nodes_0_port).focus();
     cy.contains('Next').click();
+    cy.wait(2000);
     cy.contains('Next').click();
+    cy.wait(2000);
     cy.contains('Submit').click();
     cy.contains(data.submitSuccess);
     cy.contains('Goto List').click();

web/src/components/ActionBar/ActionBar.tsx

@@ -18,12 +18,14 @@ import React from 'react';
 import type { CSSProperties } from 'react';
 import { Row, Col, Button } from 'antd';
 import { useIntl } from 'umi';
+import useThrottle from '@/hooks/useThrottle';
 
 type Props = {
   step: number;
   lastStep: number;
   onChange: (nextStep: number) => void;
   withResultView?: boolean;
+  loading?: boolean;
 };
 
 const style: CSSProperties = {
@@ -37,9 +39,13 @@ 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();
 
+  const { fn: onChangeStep } = useThrottle((n: number) => {
+    onChange(step + n);
+  });
+
   if (step > lastStep && !withResultView) {
     onChange(lastStep);
     return null;
@@ -54,12 +60,12 @@ const ActionBar: React.FC<Props> = ({ step, lastStep, onChange, withResultView }
     <div style={style}>
       <Row gutter={10} justify="end">
         <Col>
-          <Button type="primary" onClick={() => onChange(step - 1)} disabled={step === 1}>
+          <Button type="primary" onClick={() => onChangeStep(-1)} disabled={step === 1}>
             {formatMessage({ id: 'component.actionbar.button.preStep' })}
           </Button>
         </Col>
         <Col>
-          <Button type="primary" onClick={() => onChange(step + 1)}>
+          <Button type="primary" onClick={() => onChangeStep(1)} loading={loading}>
             {step < lastStep
               ? formatMessage({ id: 'component.actionbar.button.nextStep' })
               : formatMessage({ id: 'component.global.submit' })}

web/src/hooks/useLatest.ts

@@ -0,0 +1,25 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { useRef } from 'react';
+
+function useLatest<T>(value: T) {
+  const ref = useRef(value);
+  ref.current = value;
+
+  return ref;
+}
+export default useLatest;

web/src/hooks/useRequest.ts

@@ -0,0 +1,46 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { useCallback, useState } from 'react';
+
+export default function useRequest<T, Y extends any[]>(requestFn: any) {
+  const [loading, setLoading] = useState(false);
+
+  const [data, setData] = useState<T>();
+
+  const [err, setErr] = useState();
+
+  const fn = useCallback(async (...params: Y) => {
+    setLoading(true);
+    let res;
+    try {
+      res = await requestFn(...params);
+      setData(res);
+    } catch (error) {
+      // @ts-ignore
+      setErr(error);
+    }
+    setLoading(false);
+    return res;
+  }, []);
+
+  return {
+    fn,
+    data,
+    err,
+    loading,
+  };
+}

web/src/hooks/useThrottle.ts

@@ -0,0 +1,58 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import useLatest from '@/hooks/useLatest';
+import { useMemo } from 'react';
+import { throttle } from 'lodash';
+import useUnmount from '@/hooks/useUnmount';
+
+type useThrottleReturn = (...args: any) => any;
+
+interface ThrottleOptions {
+  wait?: number;
+  leading?: boolean;
+  trailing?: boolean;
+}
+
+function useThrottle<T extends useThrottleReturn>(fn: T, options?: ThrottleOptions) {
+  const fnRef = useLatest(fn);
+
+  const wait = options?.wait ?? 1000;
+
+  const throttled = useMemo(
+    () =>
+      throttle(
+        (...args: any[]): ReturnType<T> => {
+          return fnRef.current(...args);
+        },
+        wait,
+        options,
+      ),
+    [],
+  );
+
+  useUnmount(() => {
+    throttled.cancel();
+  });
+
+  return {
+    fn: throttled,
+    cancel: throttled.cancel,
+    flush: throttled.flush,
+  };
+}
+
+export default useThrottle;

web/src/hooks/useUnmount.ts

@@ -0,0 +1,31 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import useLatest from '@/hooks/useLatest';
+import { useEffect } from 'react';
+
+const useUnmount = (fn: () => void) => {
+  const fnRef = useLatest(fn);
+
+  useEffect(
+    () => () => {
+      fnRef.current();
+    },
+    [],
+  );
+};
+
+export default useUnmount;

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 '@/hooks/useRequest';
 
 const Page: React.FC = (props) => {
   const [step, setStep] = useState(1);
@@ -43,10 +44,12 @@ const Page: React.FC = (props) => {
     }
   }, []);
 
+  const { fn: createConsumers, loading: submitLoading } = useRequest(create);
+
   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 +106,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} />
     </>
   );
 };