Add loading icon when dialog is init (#7878)

* 01 system admin share base to user * 02 system admin share base to group * 03 share sub folder set user permission * 04 share sub folder set group permission * 05 share repo to user * 06 share repo to group add loading * 07 share to invite users * 08 share to other server * 09 link emails * 10 link emails * 11 fix code format
2025-09-23 12:27:48 +00:00 · 2025-06-03 14:34:27 +08:00
parent c6a3617648
commit c0933a4274
10 changed files with 337 additions and 169 deletions
--- a/frontend/src/components/dialog/lib-sub-folder-set-group-permission-dialog.js
+++ b/frontend/src/components/dialog/lib-sub-folder-set-group-permission-dialog.js
@@ -10,6 +10,8 @@ import FileChooser from '../file-chooser';
 import GroupSelect from '../common/group-select';
 import toaster from '../../components/toast';
 import BackIcon from '../../components/back-icon';
+import EmptyTip from '../../components/empty-tip';
+import Loading from '../../components/loading';

 class GroupItem extends React.Component {

@@ -118,7 +120,8 @@ class LibSubFolderSetGroupPermissionDialog extends React.Component {
      permission: 'rw',
      groupPermissionItems: [],
      folderPath: '',
-      showFileChooser: false
+      showFileChooser: false,
+      isLoading: true
    };
    this.options = [];
    if (!isPro) {
@@ -157,10 +160,14 @@ class LibSubFolderSetGroupPermissionDialog extends React.Component {
    request.then((res) => {
      if (res.data.length !== 0) {
        this.setState({
-          groupPermissionItems: res.data
+          groupPermissionItems: res.data,
+          isLoading: false
        });
+      } else {
+        this.setState({ isLoading: false });
      }
    }).catch(error => {
+      this.setState({ isLoading: false });
      let errMessage = Utils.getErrorMsg(error);
      toaster.danger(errMessage);
    });
@@ -378,6 +385,13 @@ class LibSubFolderSetGroupPermissionDialog extends React.Component {
          </tbody>
        </table>
        <div className="share-list-container">
+          {this.state.isLoading ? (
+            <Loading />
+          ) : (
+            <>
+              {this.state.groupPermissionItems.length === 0 ? (
+                <EmptyTip text={gettext('No results')} />
+              ) : (
                <table className="table-thead-hidden w-xs-250">
                  {thead}
                  <tbody>
@@ -396,6 +410,9 @@ class LibSubFolderSetGroupPermissionDialog extends React.Component {
                    })}
                  </tbody>
                </table>
+              )}
+            </>
+          )}
        </div>
      </Fragment>
    );
--- a/frontend/src/components/dialog/lib-sub-folder-set-user-permission-dialog.js
+++ b/frontend/src/components/dialog/lib-sub-folder-set-user-permission-dialog.js
@@ -10,6 +10,8 @@ import SharePermissionEditor from '../select-editor/share-permission-editor';
 import FileChooser from '../file-chooser';
 import toaster from '../../components/toast';
 import BackIcon from '../../components/back-icon';
+import EmptyTip from '../../components/empty-tip';
+import Loading from '../../components/loading';

 class UserItem extends React.Component {

@@ -121,7 +123,8 @@ class LibSubFolderSetUserPermissionDialog extends React.Component {
      permission: 'rw',
      userFolderPermItems: [],
      folderPath: '',
-      showFileChooser: false
+      showFileChooser: false,
+      isLoading: true
    };
    if (!isPro) {
      this.permissions = ['r', 'rw'];
@@ -141,9 +144,15 @@ class LibSubFolderSetUserPermissionDialog extends React.Component {
      seafileAPI.listUserFolderPerm(repoID, folderPath);
    request.then((res) => {
      if (res.data.length !== 0) {
-        this.setState({ userFolderPermItems: res.data });
+        this.setState({
+          userFolderPermItems: res.data,
+          isLoading: false
+        });
+      } else {
+        this.setState({ isLoading: false });
      }
    }).catch(error => {
+      this.setState({ isLoading: false });
      let errMessage = Utils.getErrorMsg(error);
      toaster.danger(errMessage);
    });
@@ -341,6 +350,13 @@ class LibSubFolderSetUserPermissionDialog extends React.Component {
          </tbody>
        </table>
        <div className="share-list-container">
+          {this.state.isLoading ? (
+            <Loading />
+          ) : (
+            <>
+              {userFolderPermItems.length === 0 ? (
+                <EmptyTip text={gettext('No results')} />
+              ) : (
                <table className="table-thead-hidden w-xs-250">
                  {thead}
                  <tbody>
@@ -359,6 +375,9 @@ class LibSubFolderSetUserPermissionDialog extends React.Component {
                    })}
                  </tbody>
                </table>
+              )}
+            </>
+          )}
        </div>
      </Fragment>
    );
--- a/frontend/src/components/dialog/share-to-group.js
+++ b/frontend/src/components/dialog/share-to-group.js
@@ -10,6 +10,8 @@ import SharePermissionEditor from '../select-editor/share-permission-editor';
 import EventBus from '../common/event-bus';
 import { EVENT_BUS_TYPE } from '../common/event-bus-type';
 import GroupSelect from '../common/group-select';
+import EmptyTip from '../../components/empty-tip';
+import Loading from '../../components/loading';

 class GroupItem extends React.Component {

@@ -178,7 +180,8 @@ class ShareToGroup extends React.Component {
      errorMsg: [],
      permission: 'rw',
      sharedItems: [],
-      isWiki: this.props.repoType === 'wiki'
+      isWiki: this.props.repoType === 'wiki',
+      isLoading: true
    };
    this.permissions = [];
    let { itemType, isRepoOwner } = props;
@@ -253,10 +256,14 @@ class ShareToGroup extends React.Component {
    seafileAPI.listSharedItems(repoID, path, 'group').then((res) => {
      if (res.data.length !== 0) {
        this.setState({
-          sharedItems: res.data
+          sharedItems: res.data,
+          isLoading: false
        });
+      } else {
+        this.setState({ isLoading: false });
      }
    }).catch(error => {
+      this.setState({ isLoading: false });
      let errMessage = Utils.getErrorMsg(error);
      toaster.danger(errMessage);
    });
@@ -466,6 +473,13 @@ class ShareToGroup extends React.Component {
          </tbody>
        </table>
        <div className="share-list-container">
+          {this.state.isLoading ? (
+            <Loading />
+          ) : (
+            <>
+              {this.state.sharedItems.length === 0 ? (
+                <EmptyTip text={gettext('No share link')} />
+              ) : (
                <table className="table-thead-hidden">
                  {thead}
                  <GroupList
@@ -476,6 +490,9 @@ class ShareToGroup extends React.Component {
                    onChangeUserPermission={this.onChangeUserPermission}
                  />
                </table>
+              )}
+            </>
+          )}
        </div>
      </Fragment>
    );
--- a/frontend/src/components/dialog/share-to-invite-people.js
+++ b/frontend/src/components/dialog/share-to-invite-people.js
@@ -9,6 +9,7 @@ import { Utils } from '../../utils/utils';
 import toaster from '../toast';
 import Loading from '../loading';
 import SharePermissionEditor from '../select-editor/share-permission-editor';
+import EmptyTip from '../empty-tip';
 import '../../css/invitations.css';

 class UserItem extends React.Component {
@@ -140,6 +141,7 @@ class ShareToInvitePeople extends React.Component {
      sharedItems: [],
      emails: '',
      isSubmitting: false,
+      isLoading: true
    };
    this.permissions = ['rw', 'r'];
  }
@@ -168,9 +170,15 @@ class ShareToInvitePeople extends React.Component {
    const repoID = this.props.repoID;
    seafileAPI.listRepoShareInvitations(repoID, path).then((res) => {
      if (res.data.length !== 0) {
-        this.setState({ sharedItems: res.data.repo_share_invitation_list });
+        this.setState({
+          sharedItems: res.data.repo_share_invitation_list,
+          isLoading: false
+        });
+      } else {
+        this.setState({ isLoading: false });
      }
    }).catch(error => {
+      this.setState({ isLoading: false });
      const errMessage = Utils.getErrorMsg(error);
      toaster.danger(errMessage);
    });
@@ -327,6 +335,13 @@ class ShareToInvitePeople extends React.Component {
          </tbody>
        </table>
        <div className="share-list-container">
+          {this.state.isLoading ? (
+            <Loading />
+          ) : (
+            <>
+              {sharedItems.length === 0 ? (
+                <EmptyTip text={gettext('No results')} />
+              ) : (
                <table className="w-xs-200">
                  <thead>
                    <tr>
@@ -344,6 +359,9 @@ class ShareToInvitePeople extends React.Component {
                    onChangeUserPermission={this.onChangeUserPermission}
                  />
                </table>
+              )}
+            </>
+          )}
        </div>
      </Fragment>
    );
--- a/frontend/src/components/dialog/share-to-other-server.js
+++ b/frontend/src/components/dialog/share-to-other-server.js
@@ -9,6 +9,8 @@ import toaster from '../toast';
 import OpIcon from '../op-icon';
 import SharePermissionEditor from '../select-editor/share-permission-editor';
 import { SeahubSelect } from '../common/select';
+import EmptyTip from '../empty-tip';
+import Loading from '../loading';

 class ShareItem extends React.Component {

@@ -60,15 +62,6 @@ class ShareItem extends React.Component {
        <td><a href={item.to_server_url} target="_blank" rel="noreferrer">{item.to_server_name}</a></td>
        <td>{item.to_user}</td>
        <td>{Utils.sharePerms(item.permission)}</td>
-        {/* <td>
-          <SharePermissionEditor
-            isTextMode={true}
-            isEditIconShow={this.state.isOperationShow}
-            currentPermission={currentPermission}
-            permissions={this.props.permissions}
-            onPermissionChanged={this.onChangeUserPermission}
-          />
-        </td> */}
        <td>
          <OpIcon
            className={`sf3-font sf3-font-x-01 op-icon ${isOperationShow && !isOpFrozen ? '' : 'd-none'}`}
@@ -140,18 +133,23 @@ class ShareToOtherServer extends React.Component {
      permission: 'rw',
      btnDisabled: true,
      isSubmitting: false,
-      ocmShares: []
+      ocmShares: [],
+      isLoading: true
    };
    this.permissions = ['rw', 'r'];
  }

  componentDidMount() {
    seafileAPI.listOCMSharesPrepare(this.props.repoID).then((res) => {
-      this.setState({ ocmShares: res.data.ocm_share_list });
+      this.setState({
+        ocmShares: res.data.ocm_share_list,
+        isLoading: false
+      });
    }).catch(error => {
      let errMessage = Utils.getErrorMsg(error);
      this.setState({
-        errorMsg: errMessage
+        errorMsg: errMessage,
+        isLoading: false
      });
    });
  }
@@ -275,13 +273,22 @@ class ShareToOtherServer extends React.Component {
            </tr>
          </tbody>
        </table>
-        {errorMsg ?
-          <p className="error text-center mt-4">{errorMsg}</p> :
+        {errorMsg ? (
+          <p className="error text-center mt-4">{errorMsg}</p>
+        ) : this.state.isLoading ? (
+          <Loading />
+        ) : (
+          <>
+            {ocmShares.length === 0 ? (
+              <EmptyTip text={gettext('No results')} />
+            ) : (
              <ShareList
                items={ocmShares}
                deleteShareItem={this.deleteShareItem}
              />
-        }
+            )}
+          </>
+        )}
      </Fragment>
    );
  }
--- a/frontend/src/components/dialog/share-to-user.js
+++ b/frontend/src/components/dialog/share-to-user.js
@@ -9,6 +9,8 @@ import toaster from '../toast';
 import UserSelect from '../user-select';
 import SharePermissionEditor from '../select-editor/share-permission-editor';
 import DepartmentDetailDialog from './department-detail-dialog';
+import EmptyTip from '../../components/empty-tip';
+import Loading from '../../components/loading';

 import '../../css/invitations.css';
 import '../../css/share-to-user.css';
@@ -246,7 +248,8 @@ class ShareToUser extends React.Component {
      isWiki: this.props.repoType === 'wiki',
      tmpUserList: [],
      enableSelectMembersFromDept: false,
-      isShowDepartmentDetailDialog: false
+      isShowDepartmentDetailDialog: false,
+      isLoading: true
    };
    this.options = [];
    this.permissions = [];
@@ -287,9 +290,16 @@ class ShareToUser extends React.Component {
            'permission': item.permission
          };
        });
-        this.setState({ sharedItems: res.data, tmpUserList: tmpUserList });
+        this.setState({
+          sharedItems: res.data,
+          tmpUserList: tmpUserList,
+          isLoading: false
+        });
+      } else {
+        this.setState({ isLoading: false });
      }
    }).catch(error => {
+      this.setState({ isLoading: false });
      let errMessage = Utils.getErrorMsg(error);
      toaster.danger(errMessage);
    });
@@ -606,6 +616,13 @@ class ShareToUser extends React.Component {
          </tbody>
        </table>
        <div className="share-list-container">
+          {this.state.isLoading ? (
+            <Loading />
+          ) : (
+            <>
+              {sharedItems.length === 0 ? (
+                <EmptyTip text={gettext('No share link')} />
+              ) : (
                <table className="table-thead-hidden">
                  {thead}
                  <UserList
@@ -616,6 +633,9 @@ class ShareToUser extends React.Component {
                    onChangeUserPermission={this.onChangeUserPermission}
                  />
                </table>
+              )}
+            </>
+          )}
          {this.state.isShowDepartmentDetailDialog &&
          <DepartmentDetailDialog
            toggleDepartmentDetailDialog={this.toggleDepartmentDetailDialog}
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-to-group.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-to-group.js
@@ -6,8 +6,10 @@ import { seafileAPI } from '../../../utils/seafile-api';
 import { systemAdminAPI } from '../../../utils/system-admin-api';
 import { Utils } from '../../../utils/utils';
 import toaster from '../../toast';
+import EmptyTip from '../../../components/empty-tip';
 import SharePermissionEditor from '../../select-editor/share-permission-editor';
 import GroupSelect from '../../common/group-select';
+import Loading from '../../../components/loading';

 class GroupItem extends React.Component {

@@ -119,7 +121,8 @@ class SysAdminShareToGroup extends React.Component {
      selectedOptions: [],
      errorMsg: [],
      permission: 'rw',
-      sharedItems: []
+      sharedItems: [],
+      isLoading: true
    };
    this.options = [];
    this.permissions = ['rw', 'r'];
@@ -175,10 +178,14 @@ class SysAdminShareToGroup extends React.Component {
    systemAdminAPI.sysAdminListRepoSharedItems(repoID, 'group').then((res) => {
      if (res.data.length !== 0) {
        this.setState({
-          sharedItems: res.data
+          sharedItems: res.data,
+          isLoading: false
        });
+      } else {
+        this.setState({ isLoading: false });
      }
    }).catch(error => {
+      this.setState({ isLoading: false });
      let errMessage = Utils.getErrorMsg(error);
      toaster.danger(errMessage);
    });
@@ -301,6 +308,13 @@ class SysAdminShareToGroup extends React.Component {
          </tbody>
        </table>
        <div className="share-list-container">
+          {this.state.isLoading ? (
+            <Loading />
+          ) : (
+            <>
+              {this.state.sharedItems.length === 0 ? (
+                <EmptyTip text={gettext('No share link')} className="mt-8 mb-8" />
+              ) : (
                <table className="table-thead-hidden">
                  <thead>
                    <tr>
@@ -316,6 +330,9 @@ class SysAdminShareToGroup extends React.Component {
                    onChangeUserPermission={this.onChangeUserPermission}
                  />
                </table>
+              )}
+            </>
+          )}
        </div>
      </Fragment>
    );
--- a/frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-to-user.js
+++ b/frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-to-user.js
@@ -4,6 +4,8 @@ import { isPro, gettext } from '../../../utils/constants';
 import { Button } from 'reactstrap';
 import { systemAdminAPI } from '../../../utils/system-admin-api';
 import { Utils } from '../../../utils/utils';
+import EmptyTip from '../../../components/empty-tip';
+import Loading from '../../loading';
 import toaster from '../../toast';
 import UserSelect from '../../user-select';
 import SharePermissionEditor from '../../select-editor/share-permission-editor';
@@ -117,7 +119,8 @@ class SysAdminShareToUser extends React.Component {
      selectedUsers: [],
      errorMsg: [],
      permission: 'rw',
-      sharedItems: []
+      sharedItems: [],
+      isLoading: true
    };
    this.options = [];
    this.permissions = ['rw', 'r'];
@@ -135,9 +138,15 @@ class SysAdminShareToUser extends React.Component {
    let repoID = this.props.repoID;
    systemAdminAPI.sysAdminListRepoSharedItems(repoID, 'user').then((res) => {
      if (res.data.length !== 0) {
-        this.setState({ sharedItems: res.data });
+        this.setState({
+          sharedItems: res.data,
+          isLoading: false
+        });
+      } else {
+        this.setState({ isLoading: false });
      }
    }).catch(error => {
+      this.setState({ isLoading: false });
      let errMessage = Utils.getErrorMsg(error);
      toaster.danger(errMessage);
    });
@@ -273,6 +282,13 @@ class SysAdminShareToUser extends React.Component {
          </tbody>
        </table>
        <div className="share-list-container">
+          {this.state.isLoading ? (
+            <Loading />
+          ) : (
+            <>
+              {this.state.sharedItems.length === 0 ? (
+                <EmptyTip text={gettext('No share link')} className="mt-8 mb-8" />
+              ) : (
                <table className="table-thead-hidden">
                  <thead>
                    <tr>
@@ -288,6 +304,9 @@ class SysAdminShareToUser extends React.Component {
                    onChangeUserPermission={this.onChangeUserPermission}
                  />
                </table>
+              )}
+            </>
+          )}
        </div>
      </Fragment>
    );
--- a/frontend/src/components/share-link-panel/link-authenticated-emails.js
+++ b/frontend/src/components/share-link-panel/link-authenticated-emails.js
@@ -6,6 +6,8 @@ import { Utils } from '../../utils/utils';
 import toaster from '../toast';
 import { shareLinkAPI } from '../../utils/share-link-api';
 import BackIcon from '../back-icon';
+import EmptyTip from '../empty-tip';
+import Loading from '../loading';

 class EmailItem extends React.Component {

@@ -84,7 +86,8 @@ class LinkAuthenticatedEmails extends React.Component {
    this.state = {
      inputEmails: '',
      authEmails: [],
-      isSubmitting: false
+      isSubmitting: false,
+      isLoading: true
    };
  }

@@ -95,8 +98,12 @@ class LinkAuthenticatedEmails extends React.Component {
  getItems = () => {
    const { linkToken, path } = this.props;
    shareLinkAPI.listShareLinkAuthEmails(linkToken, path).then(res => {
-      this.setState({ authEmails: res.data.auth_list });
+      this.setState({
+        authEmails: res.data.auth_list,
+        isLoading: false
+      });
    }).catch(error => {
+      this.setState({ isLoading: false });
      let errMessage = Utils.getErrorMsg(error);
      toaster.danger(errMessage);
    });
@@ -198,6 +205,13 @@ class LinkAuthenticatedEmails extends React.Component {
          </tbody>
        </table>
        <div className="share-list-container">
+          {this.state.isLoading ? (
+            <Loading />
+          ) : (
+            <>
+              {authEmails.length === 0 ? (
+                <EmptyTip text={gettext('No results')} />
+              ) : (
                <table className="table-thead-hidden w-xs-200">
                  {thead}
                  <tbody>
@@ -213,6 +227,9 @@ class LinkAuthenticatedEmails extends React.Component {
                    })}
                  </tbody>
                </table>
+              )}
+            </>
+          )}
        </div>
      </Fragment>
    );
--- a/frontend/src/components/share-link-panel/link-authenticated-users.js
+++ b/frontend/src/components/share-link-panel/link-authenticated-users.js
@@ -7,6 +7,8 @@ import { Utils } from '../../utils/utils';
 import UserSelect from '../user-select';
 import toaster from '../toast';
 import BackIcon from '../../components/back-icon';
+import EmptyTip from '../empty-tip';
+import Loading from '../loading';

 class UserItem extends React.Component {

@@ -90,7 +92,8 @@ class LinkAuthenticatedUsers extends React.Component {
    super(props);
    this.state = {
      selectedUsers: [],
-      authUsers: []
+      authUsers: [],
+      isLoading: true
    };
  }

@@ -101,8 +104,12 @@ class LinkAuthenticatedUsers extends React.Component {
  listLinkAuthUsers = () => {
    const { linkToken, path } = this.props;
    shareLinkAPI.listShareLinkAuthUsers(linkToken, path).then(res => {
-      this.setState({ authUsers: res.data.auth_list });
+      this.setState({
+        authUsers: res.data.auth_list,
+        isLoading: false
+      });
    }).catch(error => {
+      this.setState({ isLoading: false });
      let errMessage = Utils.getErrorMsg(error);
      toaster.danger(errMessage);
    });
@@ -199,6 +206,13 @@ class LinkAuthenticatedUsers extends React.Component {
          </tbody>
        </table>
        <div className="share-list-container">
+          {this.state.isLoading ? (
+            <Loading />
+          ) : (
+            <>
+              {authUsers.length === 0 ? (
+                <EmptyTip text={gettext('No results')} />
+              ) : (
                <table className="table-thead-hidden w-xs-200">
                  {thead}
                  <tbody>
@@ -214,6 +228,9 @@ class LinkAuthenticatedUsers extends React.Component {
                    })}
                  </tbody>
                </table>
+              )}
+            </>
+          )}
        </div>
      </Fragment>
    );