fix: Fix select table loading in form

Add loading when SelectTable component fetch data Change-Id: If36411e74304061d305fb61b7954e1e564ce40e1
2021-07-18 09:17:09 +08:00 · 2021-07-18 09:17:09 +08:00 · 20a309ef83
commit 20a309ef83
parent 4135fc378d
40 changed files with 145 additions and 19 deletions
--- a/src/components/FormItem/SelectTable/index.jsx
+++ b/src/components/FormItem/SelectTable/index.jsx
@ -125,6 +125,10 @@ export default class SelectTable extends React.Component {
    this.sortOrder = props.defaultSortOrder;
  }

+  componentDidMount() {
+    this.getData();
+  }
+
  componentDidUpdate(prevProps, prevState) {
    if (!isEqual(prevProps.backendPageStore, this.props.backendPageStore)) {
      this.getData();
--- a/src/pages/compute/containers/Flavor/actions/ManageAccess.jsx
+++ b/src/pages/compute/containers/Flavor/actions/ManageAccess.jsx
@ -94,6 +94,7 @@ export default class ManageAccess extends ModalAction {
        type: 'select-table',
        isMulti: true,
        required: true,
+        isLoading: this.projectStore.list.isLoading,
        datas: this.projects,
        ...projectTableOptions,
      },
--- a/src/pages/compute/containers/Flavor/actions/StepCreate/AccessTypeSetting.jsx
+++ b/src/pages/compute/containers/Flavor/actions/StepCreate/AccessTypeSetting.jsx
@ -72,6 +72,7 @@ export default class AccessTypeSetting extends Base {
        hidden: !showChoose,
        required: showChoose,
        datas: this.projects,
+        isLoading: this.projectStore.list.isLoading,
        ...projectTableOptions,
      },
    ];
--- a/src/pages/compute/containers/HostAggregate/Aggregate/actions/ManageHost.jsx
+++ b/src/pages/compute/containers/HostAggregate/Aggregate/actions/ManageHost.jsx
@ -91,6 +91,7 @@ export default class ManageHost extends ModalAction {
        type: 'select-table',
        isMulti: true,
        datas: this.computeHosts,
+        isLoading: globalComputeHostStore.list.isLoading,
        filterParams: [
          {
            label: t('Host'),
--- a/src/pages/compute/containers/Image/actions/Create.jsx
+++ b/src/pages/compute/containers/Image/actions/Create.jsx
@ -141,6 +141,7 @@ class CreateForm extends FormAction {
        required: this.isAdminPage,
        hidden: !this.isAdminPage,
        datas: this.projects,
+        isLoading: this.projectStore.list.isLoading,
        ...projectTableOptions,
      },
      {
@ -207,6 +208,7 @@ class CreateForm extends FormAction {
        isMulti: true,
        hidden: !isShare,
        datas: this.projects,
+        isLoading: this.projectStore.list.isLoading,
        ...projectTableOptions,
      },
      {
--- a/src/pages/compute/containers/Image/actions/ManageAccess.jsx
+++ b/src/pages/compute/containers/Image/actions/ManageAccess.jsx
@ -92,6 +92,7 @@ export default class ManageAccess extends ModalAction {
        isMulti: true,
        required: true,
        datas: this.projects,
+        isLoading: this.projectStore.list.isLoading,
        ...projectTableOptions,
      },
    ];
--- a/src/pages/compute/containers/Instance/actions/AssociateFip.jsx
+++ b/src/pages/compute/containers/Instance/actions/AssociateFip.jsx
@ -40,6 +40,7 @@ export default class AssociateFip extends ModalAction {
      canAssociateFloatingIPs: [],
      canReachSubnetIdsWithRouterId: [],
      routerIdWithExternalNetworkInfo: [],
+      portLoading: true,
    };
  }

@ -64,6 +65,7 @@ export default class AssociateFip extends ModalAction {
    const interfaces = await getInterfaceWithReason(instanceInterfaces);
    this.setState({
      interfaces,
+      portLoading: false,
    });
  }

@ -105,7 +107,7 @@ export default class AssociateFip extends ModalAction {
  }

  get formItems() {
-    const { fixed_ip, canAssociateFloatingIPs } = this.state;
+    const { canAssociateFloatingIPs, portLoading, fipLoading } = this.state;
    return [
      {
        name: 'instance',
@ -119,6 +121,7 @@ export default class AssociateFip extends ModalAction {
        type: 'select-table',
        required: true,
        datas: this.ports,
+        isLoading: portLoading,
        isMulti: false,
        filterParams: [
          {
@ -153,7 +156,7 @@ export default class AssociateFip extends ModalAction {
        type: 'select-table',
        required: true,
        datas: canAssociateFloatingIPs,
-        hidden: !fixed_ip,
+        isLoading: fipLoading,
        isMulti: false,
        filterParams: [
          {
--- a/src/pages/compute/containers/Instance/actions/AttachInterface.jsx
+++ b/src/pages/compute/containers/Instance/actions/AttachInterface.jsx
@ -176,6 +176,7 @@ export default class AttachInterface extends ModalAction {
        type: 'select-table',
        required: isManua,
        datas: this.subnets,
+        isLoading: this.subnetStore.list.isLoading,
        hidden: !isManua,
        isMulti: false,
        filterParams: [
--- a/src/pages/compute/containers/Instance/actions/CreateIronic/BaseStep/index.jsx
+++ b/src/pages/compute/containers/Instance/actions/CreateIronic/BaseStep/index.jsx
@ -145,6 +145,10 @@ export default class BaseStep extends Base {
  };

  get formItems() {
+    const { image } = this.locationParams;
+    const imageLoading = image
+      ? this.imageStore.isLoading
+      : this.imageStore.list.isLoading;
    return [
      {
        name: 'project',
@ -187,6 +191,7 @@ export default class BaseStep extends Base {
        label: t('Operating System'),
        type: 'select-table',
        datas: this.images,
+        isLoading: imageLoading,
        isMulti: false,
        filterParams: [
          {
--- a/src/pages/compute/containers/Instance/actions/CreateIronic/SystemStep/index.jsx
+++ b/src/pages/compute/containers/Instance/actions/CreateIronic/SystemStep/index.jsx
@ -98,6 +98,7 @@ export default class SystemStep extends Base {
        label: t('Keypair'),
        type: 'select-table',
        datas: this.keypairs,
+        isLoading: this.keyPairStore.list.isLoading,
        isMulti: false,
        required: !isPassword,
        hidden: isPassword,
--- a/src/pages/compute/containers/Instance/actions/DetachInterface.jsx
+++ b/src/pages/compute/containers/Instance/actions/DetachInterface.jsx
@ -29,6 +29,7 @@ export default class DetachInterface extends ModalAction {
  init() {
    this.store = new ServerStore();
    this.getPorts();
+    this.state.portLoading = true;
  }

  get name() {
@ -60,8 +61,11 @@ export default class DetachInterface extends ModalAction {
    return portsMap;
  }

-  getPorts() {
-    this.store.fetchInterfaceList({ id: this.item.id });
+  async getPorts() {
+    await this.store.fetchInterfaceList({ id: this.item.id });
+    this.setState({
+      portLoading: false,
+    });
  }

  get defaultValue() {
@ -82,6 +86,7 @@ export default class DetachInterface extends ModalAction {
    );

  get formItems() {
+    const { portLoading } = this.state;
    return [
      {
        name: 'instance',
@ -95,6 +100,7 @@ export default class DetachInterface extends ModalAction {
        type: 'select-table',
        required: true,
        datas: this.ports,
+        isLoading: portLoading,
        isMulti: true,
        filterParams: [
          {
--- a/src/pages/compute/containers/Instance/actions/DetachIsoVolume.jsx
+++ b/src/pages/compute/containers/Instance/actions/DetachIsoVolume.jsx
@ -98,6 +98,7 @@ export default class DetachIsoVolume extends ModalAction {
        type: 'select-table',
        required: true,
        datas: this.volumes,
+        isLoading: this.volumeStore.list.isLoading,
        isMulti: true,
        filterParams: [
          {
--- a/src/pages/compute/containers/Instance/actions/DetachVolume.jsx
+++ b/src/pages/compute/containers/Instance/actions/DetachVolume.jsx
@ -93,6 +93,7 @@ export default class DetachVolume extends ModalAction {
        type: 'select-table',
        required: true,
        datas: this.volumes,
+        isLoading: this.volumeStore.list.isLoading,
        filterParams: [
          {
            label: t('Name'),
--- a/src/pages/compute/containers/Instance/actions/LiveMigrate.jsx
+++ b/src/pages/compute/containers/Instance/actions/LiveMigrate.jsx
@ -121,6 +121,9 @@ export default class LiveMigrate extends ModalAction {
        label: t('Target Compute Host'),
        type: 'select-table',
        datas: this.hypervisors,
+        isLoading:
+          this.hypervisorStore.list.isLoading &&
+          globalComputeHostStore.list.isLoading,
        isMulti: false,
        extra: t(
          'If nova-compute on the host is disabled, it will be forbidden to be selected as the target host.'
--- a/src/pages/compute/containers/Instance/actions/ManageSecurityGroup.jsx
+++ b/src/pages/compute/containers/Instance/actions/ManageSecurityGroup.jsx
@ -142,6 +142,8 @@ export default class ManageSecurityGroup extends ModalAction {
        type: 'select-table',
        required: true,
        datas: this.ports,
+        isLoading:
+          this.portStore.list.isLoading && this.portStoreOrigin.list.isLoading,
        isMulti: false,
        onChange: this.onPortChange,
        filterParams: [
--- a/src/pages/compute/containers/Instance/actions/Migrate.jsx
+++ b/src/pages/compute/containers/Instance/actions/Migrate.jsx
@ -118,6 +118,9 @@ export default class LiveMigrate extends ModalAction {
        label: t('Target Compute Host'),
        type: 'select-table',
        datas: this.hypervisors,
+        isLoading:
+          this.hypervisorStore.list.isLoading &&
+          globalComputeHostStore.list.isLoading,
        isMulti: false,
        extra: t(
          'If nova-compute on the host is disabled, it will be forbidden to be selected as the target host.'
--- a/src/pages/compute/containers/Instance/actions/RebuildSelect.jsx
+++ b/src/pages/compute/containers/Instance/actions/RebuildSelect.jsx
@ -144,6 +144,7 @@ export default class Rebuild extends ModalAction {
        label: t('Operating System'),
        type: 'select-table',
        datas: this.images,
+        isLoading: this.imageStore.list.isLoading,
        required: true,
        isMulti: false,
        filterParams: [
--- a/src/pages/compute/containers/Instance/actions/StepCreate/BaseStep/index.jsx
+++ b/src/pages/compute/containers/Instance/actions/StepCreate/BaseStep/index.jsx
@ -307,6 +307,10 @@ export default class BaseStep extends Base {
  };

  get formItems() {
+    const { image } = this.locationParams;
+    const imageLoading = image
+      ? this.imageStore.isLoading
+      : this.imageStore.list.isLoading;
    return [
      {
        name: 'project',
@ -359,6 +363,7 @@ export default class BaseStep extends Base {
        label: t('Operating System'),
        type: 'select-table',
        datas: this.images,
+        isLoading: imageLoading,
        required: this.sourceTypeIsImage,
        isMulti: false,
        hidden: !this.sourceTypeIsImage,
@ -381,6 +386,7 @@ export default class BaseStep extends Base {
        label: t('Bootable Volume'),
        type: 'select-table',
        datas: this.volumes,
+        isLoading: this.volumeStore.list.isLoading,
        required: this.sourceTypeIsVolume,
        isMulti: false,
        hidden: !this.sourceTypeIsVolume,
--- a/src/pages/compute/containers/Instance/actions/StepCreate/SystemStep/index.jsx
+++ b/src/pages/compute/containers/Instance/actions/StepCreate/SystemStep/index.jsx
@ -216,6 +216,7 @@ export default class SystemStep extends Base {
        label: t('Keypair'),
        type: 'select-table',
        datas: this.keypairs,
+        isLoading: this.keyPairStore.list.isLoading,
        isMulti: false,
        required: !isPassword,
        hidden: isPassword,
@ -279,6 +280,7 @@ export default class SystemStep extends Base {
        hidden: !this.hasAdminRole || !more || !isManually,
        required: isManually,
        datas: this.hypervisors,
+        isLoading: this.hypervisorStore.list.isLoading,
        extra: t(
          'You can manually specify a physical node to create an instance.'
        ),
@ -291,6 +293,7 @@ export default class SystemStep extends Base {
        type: 'select-table',
        hidden: !more,
        datas: this.serverGroups,
+        isLoading: this.serverGroupStore.list.isLoading,
        extra: t(
          'Using server groups, you can create cloud hosts on the same/different physical nodes as much as possible to meet the affinity/non-affinity requirements of business applications.'
        ),
--- a/src/pages/compute/containers/Instance/components/FlavorSelectTable.jsx
+++ b/src/pages/compute/containers/Instance/components/FlavorSelectTable.jsx
@ -332,10 +332,13 @@ export default class FlavorSelectTable extends Component {

  render() {
    const { value } = this.props;
+    const isLoading =
+      this.settingStore.list.isLoading && this.flavorStore.list.isLoading;
    const props = {
      columns: this.columns,
      datas: this.flavors,
      tableHeader: this.renderTableHeander(),
+      isLoading,
      filterParams: [
        {
          label: t('Name'),
--- a/src/pages/configuration/containers/Metadata/actions/Manage.jsx
+++ b/src/pages/configuration/containers/Metadata/actions/Manage.jsx
@ -114,6 +114,7 @@ export default class Manage extends ModalAction {
        label: t('Resource Types'),
        type: 'select-table',
        datas: this.resourceTypes,
+        isLoading: this.store.resourceTypeLoading,
        isMulti: true,
        filterParams: [
          {
--- a/src/pages/network/containers/FloatingIp/Detail/PortForwarding/actions/Edit.jsx
+++ b/src/pages/network/containers/FloatingIp/Detail/PortForwarding/actions/Edit.jsx
@ -59,8 +59,8 @@ export default class Edit extends ModalAction {
  }

  async getFipAlreadyUsedPorts() {
-    const detail = await globalPortForwardingStore.getFipAlreadyUsedPorts({
-      fipID: this.item.fip.id,
+    const detail = await globalPortForwardingStore.fetchList({
+      fipId: this.item.fip.id,
    });
    this.setState({
      alreadyUsedPorts: detail || [],
@ -68,6 +68,9 @@ export default class Edit extends ModalAction {
  }

  async getInitialPortFixedIPs() {
+    this.setState({
+      fixedIpLoading: true,
+    });
    const { internal_port_id, internal_ip_address } = this.item;
    const portDetail = await globalPortStore.fetchDetail({
      id: internal_port_id,
@ -143,6 +146,9 @@ export default class Edit extends ModalAction {
  }

  handlePortSelect = async (data) => {
+    this.setState({
+      fixedIpLoading: true,
+    });
    const { canReachSubnetIdsWithRouterId } = this.state;
    const interfacesWithReason = await getInterfaceWithReason(
      data.selectedRows
@ -156,6 +162,7 @@ export default class Edit extends ModalAction {
    this.setState({
      portFixedIPs,
      fixed_ip_address: undefined,
+      fixedIpLoading: false,
    });

    this.formRef.current &&
@ -181,7 +188,7 @@ export default class Edit extends ModalAction {
    data.internal_port_id = selectedRows[0].id;
    return globalPortForwardingStore.edit(
      {
-        fipID: this.item.fip.id,
+        fipId: this.item.fip.id,
        id: this.item.id,
      },
      data
--- a/src/pages/network/containers/FloatingIp/Detail/PortForwarding/index.jsx
+++ b/src/pages/network/containers/FloatingIp/Detail/PortForwarding/index.jsx
@ -39,7 +39,7 @@ export default class PortForwarding extends Base {
  updateFetchParams = (params) => {
    const { id, all_projects, ...rest } = params;
    return {
-      fipID: id,
+      fipId: id,
      fipInfo: this.props.detail,
      ...rest,
    };
--- a/src/pages/network/containers/FloatingIp/actions/Associate.jsx
+++ b/src/pages/network/containers/FloatingIp/actions/Associate.jsx
@ -116,6 +116,20 @@ export default class Associate extends ModalAction {
  };

  handleInstanceSelect = async (data) => {
+    this.setState({
+      instanceLoading: true,
+    });
+    if (data.selectedRows.length === 0) {
+      this.setState({
+        instanceFixedIPs: interfacesWithReasons,
+        instanceLoading: false,
+      });
+      return Promise.resolve().then(() => {
+        this.formRef.current.setFieldsValue({
+          port: null,
+        });
+      });
+    }
    const { id } = data.selectedRows[0];
    // 获取云主机所有的interface
    const instanceInterfaces = await globalServerStore.fetchInterfaceList({
@ -130,6 +144,7 @@ export default class Associate extends ModalAction {
    );
    this.setState({
      instanceFixedIPs: interfacesWithReasons,
+      instanceLoading: false,
    });
    return Promise.resolve().then(() => {
      this.formRef.current.setFieldsValue({
@ -139,6 +154,9 @@ export default class Associate extends ModalAction {
  };

  handlePortSelect = async (data) => {
+    this.setState({
+      fixedIpLoading: true,
+    });
    const { canReachSubnetIdsWithRouterId } = this.state;
    const interfacesWithReason = await getInterfaceWithReason(
      data.selectedRows
@ -151,6 +169,7 @@ export default class Associate extends ModalAction {

    this.setState({
      portFixedIPs,
+      fixedIpLoading: false,
    });
    return Promise.resolve().then(() => {
      this.formRef.current.setFieldsValue({
@ -200,7 +219,11 @@ export default class Associate extends ModalAction {

  get formItems() {
    // console.log(toJS(this.store.list.data));
-    const { resourceType = 'instance', instanceFixedIPs } = this.state;
+    const {
+      resourceType = 'instance',
+      instanceFixedIPs,
+      instanceLoading,
+    } = this.state;
    const ret = [
      {
        name: 'floatingIp',
@ -239,6 +262,7 @@ export default class Associate extends ModalAction {
              type: 'select-table',
              required: true,
              datas: instanceFixedIPs,
+              isLoading: instanceLoading,
              isMulti: false,
              filterParams: [
                {
--- a/src/pages/network/containers/FloatingIp/actions/CreateDNAT.jsx
+++ b/src/pages/network/containers/FloatingIp/actions/CreateDNAT.jsx
@ -54,8 +54,8 @@ export default class CreateDNAT extends ModalAction {
  }

  async getFipAlreadyUsedPorts() {
-    const detail = await globalPortForwardingStore.getFipAlreadyUsedPorts({
-      fipID: this.item.id,
+    const detail = await globalPortForwardingStore.fetchList({
+      fipId: this.item.id,
    });
    this.setState({
      alreadyUsedPorts: detail || [],
@ -85,6 +85,9 @@ export default class CreateDNAT extends ModalAction {
  }

  handlePortSelect = async (data) => {
+    this.setState({
+      fixedIpLoading: true,
+    });
    const { canReachSubnetIdsWithRouterId } = this.state;
    const interfacesWithReason = await getInterfaceWithReason(
      data.selectedRows
@ -98,6 +101,7 @@ export default class CreateDNAT extends ModalAction {
    this.setState({
      portFixedIPs,
      fixed_ip_address: undefined,
+      fixedIpLoading: false,
    });

    this.formRef.current &&
--- a/src/pages/network/containers/LoadBalancers/LoadBalancerInstance/actions/AssociateFIP.jsx
+++ b/src/pages/network/containers/LoadBalancers/LoadBalancerInstance/actions/AssociateFIP.jsx
@ -38,6 +38,7 @@ export default class AssociateFip extends ModalAction {
      portFixedIPs: [],
      canAssociateFloatingIPs: [],
      canReachSubnetIdsWithRouterId: [],
+      portLoading: true,
    };
  }

@ -69,6 +70,7 @@ export default class AssociateFip extends ModalAction {
    const interfaces = await getInterfaceWithReason(buildInterfaces);
    this.setState({
      interfaces,
+      portLoading: false,
    });
  }

@ -107,7 +109,7 @@ export default class AssociateFip extends ModalAction {
  };

  get formItems() {
-    const { fixed_ip, canAssociateFloatingIPs } = this.state;
+    const { canAssociateFloatingIPs, portLoading, fipLoading } = this.state;
    return [
      {
        name: 'lb',
@ -121,6 +123,7 @@ export default class AssociateFip extends ModalAction {
        type: 'select-table',
        required: true,
        datas: this.ports,
+        isLoading: portLoading,
        disabledFunc: (record) => !record.available,
        onChange: this.handleFixedIPChange,
        isMulti: false,
@ -151,7 +154,7 @@ export default class AssociateFip extends ModalAction {
        type: 'select-table',
        required: true,
        datas: canAssociateFloatingIPs,
-        hidden: !fixed_ip,
+        isLoading: fipLoading,
        isMulti: false,
        filterParams: [
          {
--- a/src/pages/network/containers/Router/actions/AssociateFip.jsx
+++ b/src/pages/network/containers/Router/actions/AssociateFip.jsx
@ -104,6 +104,7 @@ export default class AssociateFip extends ModalAction {
        type: 'select-table',
        required: true,
        datas: this.fipList,
+        isLoading: this.floatingIpStore.list.isLoading,
        isMulti: false,
        filterParams: [
          {
--- a/src/pages/network/containers/Router/actions/ConnectSubnet.jsx
+++ b/src/pages/network/containers/Router/actions/ConnectSubnet.jsx
@ -101,6 +101,7 @@ export default class ConnectSubnet extends ModalAction {
  };

  get formItems() {
+    const { networkId } = this.state;
    return [
      {
        name: 'name',
@ -120,6 +121,7 @@ export default class ConnectSubnet extends ModalAction {
        label: t('Subnet'),
        type: 'select-table',
        datas: this.subnets,
+        isLoading: networkId && this.subnetStore.list.isLoading,
        disabledFunc: this.disabledFuncSubnet,
        required: true,
        filterParams: [
--- a/src/pages/network/containers/Router/actions/Create.jsx
+++ b/src/pages/network/containers/Router/actions/Create.jsx
@ -118,6 +118,7 @@ export default class Create extends ModalAction {
        label: t('Availability Zone Hints'),
        type: 'select-table',
        datas: this.aZones,
+        isLoading: globalNeutronStore.zoneLoading,
        isMulti: true,
        filterParams: [
          {
--- a/src/pages/network/containers/Router/actions/DisconnectSubnet.jsx
+++ b/src/pages/network/containers/Router/actions/DisconnectSubnet.jsx
@ -33,6 +33,7 @@ export default class DisconnectSubnet extends ModalAction {
    this.subnetStore = globalSubnetStore;
    this.portStore = new PortStore();
    this.getSubnetList();
+    this.state.subnetLoading = true;
  }

  static policy = 'remove_router_interface';
@ -83,13 +84,14 @@ export default class DisconnectSubnet extends ModalAction {
    });
    this.setState({
      subnets: subnets.map((it) => toJS(it)),
+      subnetLoading: false,
    });
  }

  static allowed = () => Promise.resolve(true);

  get formItems() {
-    const { subnets = [] } = this.state;
+    const { subnets = [], subnetLoading } = this.state;
    return [
      {
        name: 'name',
@ -102,6 +104,7 @@ export default class DisconnectSubnet extends ModalAction {
        label: t('Subnet'),
        type: 'select-table',
        datas: subnets,
+        isLoading: subnetLoading,
        required: true,
        filterParams: [
          {
--- a/src/pages/network/containers/VPN/EndpointGroup/actions/Create.js
+++ b/src/pages/network/containers/VPN/EndpointGroup/actions/Create.js
@ -54,12 +54,16 @@ export default class Create extends ModalAction {
    this.state = {
      subnets: [],
      type: 'subnet',
+      subnetLoading: true,
    };
    this.getAllSubnets();
  }

  async getAllSubnets() {
    this.allSubnets = await this.subnetStore.pureFetchList();
+    this.setState({
+      subnetLoading: false,
+    });
  }

  get defaultValue() {
@ -87,18 +91,22 @@ export default class Create extends ModalAction {
  };

  handleRouterChange = async (value) => {
+    this.setState({
+      subnetLoading: true,
+    });
    const ports = await getPortsWithFixedIPs();
    const allSubnets = getSubnetToRouter(ports, value.selectedRows, false);
    this.setState({
      subnets: this.allSubnets.filter((item) => {
        return allSubnets.findIndex((i) => i.subnet_id === item.id) > -1;
      }),
+      subnetLoading: false,
    });
    this.formRef.current.resetFields(['subnet_id']);
  };

  get formItems() {
-    const { subnets, type } = this.state;
+    const { subnets, type, subnetLoading } = this.state;
    const isLocal = type === 'subnet';

    return [
@ -151,6 +159,7 @@ export default class Create extends ModalAction {
        label: t('Subnet'),
        type: 'select-table',
        datas: subnets,
+        isLoading: subnetLoading,
        isMulti: true,
        columns: [
          {
--- a/src/pages/network/containers/VirtualAdapter/actions/AssociateFIP.jsx
+++ b/src/pages/network/containers/VirtualAdapter/actions/AssociateFIP.jsx
@ -38,6 +38,7 @@ export default class AssociateFip extends ModalAction {
      fixed_ip: null,
      canAssociateFloatingIPs: [],
      canReachSubnetIdsWithRouterId: [],
+      portLoading: true,
    };
  }

@ -46,6 +47,7 @@ export default class AssociateFip extends ModalAction {
    const interfaces = await getInterfaceWithReason(buildInterfaces);
    this.setState({
      interfaces,
+      portLoading: false,
    });
  }

@ -104,7 +106,7 @@ export default class AssociateFip extends ModalAction {
  };

  get formItems() {
-    const { fixed_ip, canAssociateFloatingIPs } = this.state;
+    const { canAssociateFloatingIPs, portLoading, fipLoading } = this.state;
    return [
      {
        name: 'virtualAdapter',
@ -118,6 +120,7 @@ export default class AssociateFip extends ModalAction {
        type: 'select-table',
        required: true,
        datas: this.ports,
+        isLoading: portLoading,
        disabledFunc: (record) => !record.available,
        onChange: this.handleFixedIPChange,
        isMulti: false,
@ -148,7 +151,7 @@ export default class AssociateFip extends ModalAction {
        type: 'select-table',
        required: true,
        datas: canAssociateFloatingIPs,
-        hidden: !fixed_ip,
+        isLoading: fipLoading,
        isMulti: false,
        filterParams: [
          {
--- a/src/pages/network/containers/VirtualAdapter/actions/Create.jsx
+++ b/src/pages/network/containers/VirtualAdapter/actions/Create.jsx
@ -265,6 +265,7 @@ export default class CreateAction extends ModalAction {
          'The security group is similar to the firewall function for setting up network access control, or you can go to the console and create a new security group. (Note: The security group you selected will work on all virtual LANS on the instances.)'
        ),
        datas: this.securityGroups,
+        isLoading: this.securityGroupStore.list.isLoading,
        extraParams: { project_id: this.currentProjectId },
        backendPageStore: this.securityGroupStore,
        isMulti: true,
--- a/src/pages/storage/containers/Volume/actions/Create/index.jsx
+++ b/src/pages/storage/containers/Volume/actions/Create/index.jsx
@ -361,6 +361,7 @@ export default class Create extends FormAction {
        label: t('Operating System'),
        type: 'select-table',
        datas: this.images,
+        isLoading: this.imageStore.list.isLoading,
        required: this.sourceTypeIsImage,
        isMulti: false,
        hidden: !this.sourceTypeIsImage,
@ -434,6 +435,7 @@ export default class Create extends FormAction {
        ),
        ...volumeTypeSelectProps,
        datas: this.volumeTypes,
+        isLoading: this.volumeTypeStore.list.isLoading,
        required: true,
        extra: this.getVolumeTypeExtra(),
        onChange: this.onVolumeTypeChange,
--- a/src/pages/storage/containers/Volume/actions/Migrate.jsx
+++ b/src/pages/storage/containers/Volume/actions/Migrate.jsx
@ -30,7 +30,7 @@ export default class Migrate extends ModalAction {
    return 'large';
  }

-  get modalSize() {
+  getModalSize() {
    return 'large';
  }

@ -89,6 +89,7 @@ export default class Migrate extends ModalAction {
        type: 'select-table',
        required: true,
        datas: this.pools,
+        isLoading: this.poolStore.list.isLoading,
        disabledFunc: this.disableFunc,
        rowKey: 'name',
        columns: poolColumns,
--- a/src/pages/storage/containers/VolumeType/VolumeType/actions/Create.jsx
+++ b/src/pages/storage/containers/VolumeType/VolumeType/actions/Create.jsx
@ -148,6 +148,7 @@ export default class Create extends ModalAction {
        isMulti: true,
        hidden: isPublic,
        datas: this.projects,
+        isLoading: this.projectStore.list.isLoading,
        ...projectTableOptions,
      },
    ];
--- a/src/pages/storage/containers/VolumeType/VolumeType/actions/ManageAccess.jsx
+++ b/src/pages/storage/containers/VolumeType/VolumeType/actions/ManageAccess.jsx
@ -113,6 +113,7 @@ export default class ManageAccess extends ModalAction {
        isMulti: true,
        hidden: isPublic,
        datas: this.projects,
+        isLoading: this.projectStore.list.isLoading,
        ...projectTableOptions,
      },
    ];
--- a/src/pages/storage/containers/VolumeType/VolumeType/actions/ManageQos.jsx
+++ b/src/pages/storage/containers/VolumeType/VolumeType/actions/ManageQos.jsx
@ -79,6 +79,7 @@ export default class ManageQos extends ModalAction {
        type: 'select-table',
        required: false,
        datas: this.QosMap,
+        isLoading: this.store.list.isLoading,
        isMulti: false,
        filterParams: [
          {
--- a/src/resources/floatingip.js
+++ b/src/resources/floatingip.js
@ -258,7 +258,17 @@ export async function getFipsFromRouterId(router) {
 }

 export async function handleFixedIPChange(e) {
+  this.setState({
+    fipLoading: true,
+  });
  const { canReachSubnetIdsWithRouterId } = this.state;
+  if (!e.selectedRows.length) {
+    this.setState({
+      fixed_ip: null,
+      canAssociateFloatingIPs: [],
+      fipLoading: false,
+    });
+  }
  const item = e.selectedRows[0];
  const totalFips = [];
  // 考虑单subnet连接多个路由，并且路由开启了不同的公网网关。
@ -280,5 +290,6 @@ export async function handleFixedIPChange(e) {
  this.setState({
    fixed_ip: item,
    canAssociateFloatingIPs: norepeatFips,
+    fipLoading: false,
  });
 }
--- a/src/resources/port.jsx
+++ b/src/resources/port.jsx
@ -84,7 +84,7 @@ export function getPortsAndReasons(
 }

 export function getPortFormItem(device_owner) {
-  const { portFixedIPs } = this.state;
+  const { portFixedIPs, fixedIpLoading } = this.state;
  return [
    {
      name: 'virtual_adapter',
@ -151,6 +151,7 @@ export function getPortFormItem(device_owner) {
      rowKey: 'fixed_ip_address',
      required: true,
      datas: portFixedIPs,
+      isLoading: fixedIpLoading,
      isMulti: false,
      filterParams: [
        {