refactor Select loading spinner property

scalableminds · Oct 14, 2022 · 06ec13b · 06ec13b
1 parent 397642e
commit 06ec13b
Show file tree

Hide file tree

Showing 8 changed files with 18 additions and 19 deletions.
diff --git a/frontend/javascripts/admin/project/project_create_view.tsx b/frontend/javascripts/admin/project/project_create_view.tsx
@@ -1,4 +1,4 @@
-import { Form, Input, Select, Button, Card, InputNumber, Checkbox, Spin } from "antd";
+import { Form, Input, Select, Button, Card, InputNumber, Checkbox } from "antd";
 import React, { useState, useEffect } from "react";
 import { useHistory } from "react-router-dom";
 import { useSelector } from "react-redux";
@@ -112,7 +112,7 @@ function ProjectCreateView({ projectId }: PropsWithRouter) {
               optionFilterProp="label"
               style={fullWidth}
               disabled={isEditMode}
-              notFoundContent={isFetchingData ? <Spin size="small" /> : "No Data"}
+              loading={isFetchingData}
               options={teams.map((team: APITeam) => ({
                 label: team.name,
                 value: team.id,
@@ -136,7 +136,7 @@ function ProjectCreateView({ projectId }: PropsWithRouter) {
               optionFilterProp="label"
               style={fullWidth}
               disabled={isEditMode}
-              notFoundContent={isFetchingData ? <Spin size="small" /> : "No Data"}
+              loading={isFetchingData}
               options={users.map((user: APIUser) => ({
                 label: `${user.lastName}, ${user.firstName} (${user.email})`,
                 value: user.id,

diff --git a/frontend/javascripts/admin/scripts/script_create_view.tsx b/frontend/javascripts/admin/scripts/script_create_view.tsx
@@ -1,4 +1,4 @@
-import { Form, Input, Select, Button, Card, Spin } from "antd";
+import { Form, Input, Select, Button, Card } from "antd";
 import type { RouteComponentProps } from "react-router-dom";
 import { withRouter } from "react-router-dom";
 import { connect } from "react-redux";
@@ -116,7 +116,7 @@ function ScriptCreateView({ scriptId, activeUser, history }: PropsWithRouter) {
               style={{
                 width: "100%",
               }}
-              notFoundContent={isFetchingData ? <Spin size="small" /> : "No Data"}
+              loading={isFetchingData}
               options={users.map((user: APIUser) => ({
                 value: user.id,
                 label: `${user.lastName}, ${user.firstName} (${user.email})`,

diff --git a/frontend/javascripts/admin/task/task_create_form_view.tsx b/frontend/javascripts/admin/task/task_create_form_view.tsx
@@ -501,7 +501,7 @@ class TaskCreateFormView extends React.PureComponent<Props, State> {
               disabled={
                 isEditingMode || this.state.specificationType === SpecificationEnum.BaseAnnotation
               }
-              notFoundContent={this.state.isFetchingData ? <Spin size="small" /> : "No Data"}
+              loading={this.state.isFetchingData}
               options={this.state.datasets.map((dataset: APIDataset) => ({
                 label: dataset.name,
                 value: dataset.name,
@@ -577,7 +577,7 @@ class TaskCreateFormView extends React.PureComponent<Props, State> {
                   optionFilterProp="label"
                   style={fullWidth}
                   disabled={isEditingMode}
-                  notFoundContent={this.state.isFetchingData ? <Spin size="small" /> : "No Data"}
+                  loading={this.state.isFetchingData}
                   options={this.state.taskTypes.map((taskType: APITaskType) => ({
                     value: taskType.id,
                     label: taskType.summary,
@@ -657,7 +657,7 @@ class TaskCreateFormView extends React.PureComponent<Props, State> {
                   optionFilterProp="label"
                   style={fullWidth}
                   disabled={isEditingMode}
-                  notFoundContent={this.state.isFetchingData ? <Spin size="small" /> : "No Data"}
+                  loading={this.state.isFetchingData}
                   options={this.state.projects.map((project: APIProject) => ({
                     value: project.name,
                     label: project.name,
@@ -672,7 +672,7 @@ class TaskCreateFormView extends React.PureComponent<Props, State> {
                   optionFilterProp="label"
                   style={fullWidth}
                   disabled={isEditingMode}
-                  notFoundContent={this.state.isFetchingData ? <Spin size="small" /> : "No Data"}
+                  loading={this.state.isFetchingData}
                   options={this.state.scripts.map((script: APIScript) => ({
                     value: script.id,
                     label: script.name,

diff --git a/frontend/javascripts/admin/task/task_search_form.tsx b/frontend/javascripts/admin/task/task_search_form.tsx
@@ -1,4 +1,4 @@
-import { Form, Row, Dropdown, Menu, Col, Button, Input, Select, Spin } from "antd";
+import { Form, Row, Dropdown, Menu, Col, Button, Input, Select } from "antd";
 import { FormInstance } from "antd/lib/form";
 import { DownloadOutlined, DownOutlined, RetweetOutlined } from "@ant-design/icons";
 // @ts-expect-error ts-migrate(7016) FIXME: Could not find a declaration file for module '@sca... Remove this comment to see the full error message
@@ -222,7 +222,7 @@ class TaskSearchForm extends React.Component<Props, State> {
                 style={{
                   width: "100%",
                 }}
-                notFoundContent={this.state.isFetchingData ? <Spin size="small" /> : "No Data"}
+                loading={this.state.isFetchingData}
                 options={this.state.taskTypes.map((taskType: APITaskType) => ({
                   value: taskType.id,
                   label: `${taskType.summary}`,
@@ -242,7 +242,7 @@ class TaskSearchForm extends React.Component<Props, State> {
                 style={{
                   width: "100%",
                 }}
-                notFoundContent={this.state.isFetchingData ? <Spin size="small" /> : "No Data"}
+                loading={this.state.isFetchingData}
                 options={this.state.projects.map((project: APIProject) => ({
                   value: project.id,
                   label: `${project.name}`,
@@ -260,7 +260,7 @@ class TaskSearchForm extends React.Component<Props, State> {
                 style={{
                   width: "100%",
                 }}
-                notFoundContent={this.state.isFetchingData ? <Spin size="small" /> : "No Data"}
+                loading={this.state.isFetchingData}
                 options={this.state.users
                   .filter((u) => u.isActive)
                   .map((user: APIUser) => ({

diff --git a/frontend/javascripts/admin/tasktype/task_type_create_view.tsx b/frontend/javascripts/admin/tasktype/task_type_create_view.tsx
@@ -8,7 +8,6 @@ import {
   Select,
   InputNumber,
   Tooltip,
-  Spin,
 } from "antd";
 import { syncValidator } from "types/validation";
 import { FormInstance } from "antd/lib/form";
@@ -256,7 +255,7 @@ class TaskTypeCreateView extends React.PureComponent<Props, State> {
                 style={{
                   width: "100%",
                 }}
-                notFoundContent={this.state.isFetchingData ? <Spin size="small" /> : "No Data"}
+                loading={this.state.isFetchingData}
                 options={this.state.teams.map((team: APITeam) => ({
                   value: team.id,
                   label: `${team.name}`,

diff --git a/frontend/javascripts/admin/time/time_line_view.tsx b/frontend/javascripts/admin/time/time_line_view.tsx
@@ -312,7 +312,7 @@ class TimeLineView extends React.PureComponent<Props, State> {
                       width: "100%",
                     }}
                     onChange={this.handleUserChange}
-                    notFoundContent={this.state.isFetchingUsers ? <Spin size="small" /> : "No Data"}
+                    loading={this.state.isFetchingUsers}
                     options={this.state.users
                       .filter((u) => u.isActive)
                       .map((user: APIUser) => ({

diff --git a/frontend/javascripts/dashboard/dataset/team_selection_component.tsx b/frontend/javascripts/dashboard/dataset/team_selection_component.tsx
@@ -1,4 +1,4 @@
-import { Select, Spin } from "antd";
+import { Select } from "antd";
 import * as React from "react";
 import _ from "lodash";
 import type { APITeam } from "types/api_flow_types";
@@ -96,7 +96,7 @@ class TeamSelectionComponent extends React.PureComponent<Props, State> {
         value={this.state.selectedTeams.map((t) => t.id)}
         filterOption
         disabled={this.props.disabled ? this.props.disabled : false}
-        notFoundContent={this.state.isFetchingData ? <Spin size="small" /> : "No Data"}
+        loading={this.state.isFetchingData}
       >
         {this.getAllTeams().map((team) => (
           <Option

diff --git a/frontend/javascripts/oxalis/view/action-bar/merge_modal_view.tsx b/frontend/javascripts/oxalis/view/action-bar/merge_modal_view.tsx
@@ -261,7 +261,7 @@ class _MergeModalView extends PureComponent<Props, MergeModalViewState> {
                   width: 200,
                 }}
                 onChange={this.handleChangeMergeProject}
-                notFoundContent={this.state.isFetchingData ? <Spin size="small" /> : "No Data"}
+                loading={this.state.isFetchingData}
                 options={this.state.projects.map((project) => ({
                   value: project.id,
                   label: project.label,