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

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,24 +385,34 @@ class LibSubFolderSetGroupPermissionDialog extends React.Component {
           </tbody>
         </table>
         <div className="share-list-container">
-          <table className="table-thead-hidden w-xs-250">
+          {this.state.isLoading ? (
-            {thead}
+            <Loading />
-            <tbody>
+          ) : (
-              {this.state.groupPermissionItems.map((item, index) => {
+            <>
-                return (
+              {this.state.groupPermissionItems.length === 0 ? (
-                  <GroupItem
+                <EmptyTip text={gettext('No results')} />
-                    key={index}
+              ) : (
-                    item={item}
+                <table className="table-thead-hidden w-xs-250">
-                    permissions={this.permissions}
+                  {thead}
-                    deleteGroupPermissionItem={this.deleteGroupPermissionItem}
+                  <tbody>
-                    onChangeGroupPermission={this.onChangeGroupPermission}
+                    {this.state.groupPermissionItems.map((item, index) => {
-                    showPath={showPath}
+                      return (
-                    repoName={this.props.repoName}
+                        <GroupItem
-                  />
+                          key={index}
-                );
+                          item={item}
-              })}
+                          permissions={this.permissions}
-            </tbody>
+                          deleteGroupPermissionItem={this.deleteGroupPermissionItem}
-          </table>
+                          onChangeGroupPermission={this.onChangeGroupPermission}
+                          showPath={showPath}
+                          repoName={this.props.repoName}
+                        />
+                      );
+                    })}
+                  </tbody>
+                </table>
+              )}
+            </>
+          )}
         </div>
       </Fragment>
     );

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,24 +350,34 @@ class LibSubFolderSetUserPermissionDialog extends React.Component {
           </tbody>
         </table>
         <div className="share-list-container">
-          <table className="table-thead-hidden w-xs-250">
+          {this.state.isLoading ? (
-            {thead}
+            <Loading />
-            <tbody>
+          ) : (
-              {userFolderPermItems.map((item, index) => {
+            <>
-                return (
+              {userFolderPermItems.length === 0 ? (
-                  <UserItem
+                <EmptyTip text={gettext('No results')} />
-                    key={index}
+              ) : (
-                    item={item}
+                <table className="table-thead-hidden w-xs-250">
-                    permissions={this.permissions}
+                  {thead}
-                    deleteUserFolderPermission={this.deleteUserFolderPermItem}
+                  <tbody>
-                    onChangeUserFolderPerm={this.onChangeUserFolderPerm}
+                    {userFolderPermItems.map((item, index) => {
-                    showPath={showPath}
+                      return (
-                    repoName={this.props.repoName}
+                        <UserItem
-                  />
+                          key={index}
-                );
+                          item={item}
-              })}
+                          permissions={this.permissions}
-            </tbody>
+                          deleteUserFolderPermission={this.deleteUserFolderPermItem}
-          </table>
+                          onChangeUserFolderPerm={this.onChangeUserFolderPerm}
+                          showPath={showPath}
+                          repoName={this.props.repoName}
+                        />
+                      );
+                    })}
+                  </tbody>
+                </table>
+              )}
+            </>
+          )}
         </div>
       </Fragment>
     );

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,16 +473,26 @@ class ShareToGroup extends React.Component {
           </tbody>
         </table>
         <div className="share-list-container">
-          <table className="table-thead-hidden">
+          {this.state.isLoading ? (
-            {thead}
+            <Loading />
-            <GroupList
+          ) : (
-              repoID={this.props.repoID}
+            <>
-              items={this.state.sharedItems}
+              {this.state.sharedItems.length === 0 ? (
-              permissions={this.permissions}
+                <EmptyTip text={gettext('No share link')} />
-              deleteShareItem={this.deleteShareItem}
+              ) : (
-              onChangeUserPermission={this.onChangeUserPermission}
+                <table className="table-thead-hidden">
-            />
+                  {thead}
-          </table>
+                  <GroupList
+                    repoID={this.props.repoID}
+                    items={this.state.sharedItems}
+                    permissions={this.permissions}
+                    deleteShareItem={this.deleteShareItem}
+                    onChangeUserPermission={this.onChangeUserPermission}
+                  />
+                </table>
+              )}
+            </>
+          )}
         </div>
       </Fragment>
     );

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,23 +335,33 @@ class ShareToInvitePeople extends React.Component {
           </tbody>
         </table>
         <div className="share-list-container">
-          <table className="w-xs-200">
+          {this.state.isLoading ? (
-            <thead>
+            <Loading />
-              <tr>
+          ) : (
-                <th width="25%">{gettext('Email')}</th>
+            <>
-                <th width="20%">{gettext('Permission')}</th>
+              {sharedItems.length === 0 ? (
-                <th width="20%">{gettext('Expiration')}</th>
+                <EmptyTip text={gettext('No results')} />
-                <th width="20%">{gettext('Inviter')}</th>
+              ) : (
-                <th width="15%">{''}</th>
+                <table className="w-xs-200">
-              </tr>
+                  <thead>
-            </thead>
+                    <tr>
-            <UserList
+                      <th width="25%">{gettext('Email')}</th>
-              items={sharedItems}
+                      <th width="20%">{gettext('Permission')}</th>
-              permissions={this.permissions}
+                      <th width="20%">{gettext('Expiration')}</th>
-              deleteShareItem={this.deleteShareItem}
+                      <th width="20%">{gettext('Inviter')}</th>
-              onChangeUserPermission={this.onChangeUserPermission}
+                      <th width="15%">{''}</th>
-            />
+                    </tr>
-          </table>
+                  </thead>
+                  <UserList
+                    items={sharedItems}
+                    permissions={this.permissions}
+                    deleteShareItem={this.deleteShareItem}
+                    onChangeUserPermission={this.onChangeUserPermission}
+                  />
+                </table>
+              )}
+            </>
+          )}
         </div>
       </Fragment>
     );

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 ?
+        {errorMsg ? (
-          <p className="error text-center mt-4">{errorMsg}</p> :
+          <p className="error text-center mt-4">{errorMsg}</p>
-          <ShareList
+        ) : this.state.isLoading ? (
-            items={ocmShares}
+          <Loading />
-            deleteShareItem={this.deleteShareItem}
+        ) : (
-          />
+          <>
-        }
+            {ocmShares.length === 0 ? (
+              <EmptyTip text={gettext('No results')} />
+            ) : (
+              <ShareList
+                items={ocmShares}
+                deleteShareItem={this.deleteShareItem}
+              />
+            )}
+          </>
+        )}
       </Fragment>
     );
   }

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,16 +616,26 @@ class ShareToUser extends React.Component {
           </tbody>
         </table>
         <div className="share-list-container">
-          <table className="table-thead-hidden">
+          {this.state.isLoading ? (
-            {thead}
+            <Loading />
-            <UserList
+          ) : (
-              repoID={this.props.repoID}
+            <>
-              items={sharedItems}
+              {sharedItems.length === 0 ? (
-              permissions={this.permissions}
+                <EmptyTip text={gettext('No share link')} />
-              deleteShareItem={this.deleteShareItem}
+              ) : (
-              onChangeUserPermission={this.onChangeUserPermission}
+                <table className="table-thead-hidden">
-            />
+                  {thead}
-          </table>
+                  <UserList
+                    repoID={this.props.repoID}
+                    items={sharedItems}
+                    permissions={this.permissions}
+                    deleteShareItem={this.deleteShareItem}
+                    onChangeUserPermission={this.onChangeUserPermission}
+                  />
+                </table>
+              )}
+            </>
+          )}
           {this.state.isShowDepartmentDetailDialog &&
           <DepartmentDetailDialog
             toggleDepartmentDetailDialog={this.toggleDepartmentDetailDialog}

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,21 +308,31 @@ class SysAdminShareToGroup extends React.Component {
           </tbody>
         </table>
         <div className="share-list-container">
-          <table className="table-thead-hidden">
+          {this.state.isLoading ? (
-            <thead>
+            <Loading />
-              <tr>
+          ) : (
-                <th width="50%">{gettext('Group')}</th>
+            <>
-                <th width="35%">{gettext('Permission')}</th>
+              {this.state.sharedItems.length === 0 ? (
-                <th width="15%"></th>
+                <EmptyTip text={gettext('No share link')} className="mt-8 mb-8" />
-              </tr>
+              ) : (
-            </thead>
+                <table className="table-thead-hidden">
-            <GroupList
+                  <thead>
-              items={this.state.sharedItems}
+                    <tr>
-              permissions={this.permissions}
+                      <th width="50%">{gettext('Group')}</th>
-              deleteShareItem={this.deleteShareItem}
+                      <th width="35%">{gettext('Permission')}</th>
-              onChangeUserPermission={this.onChangeUserPermission}
+                      <th width="15%"></th>
-            />
+                    </tr>
-          </table>
+                  </thead>
+                  <GroupList
+                    items={this.state.sharedItems}
+                    permissions={this.permissions}
+                    deleteShareItem={this.deleteShareItem}
+                    onChangeUserPermission={this.onChangeUserPermission}
+                  />
+                </table>
+              )}
+            </>
+          )}
         </div>
       </Fragment>
     );

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,21 +282,31 @@ class SysAdminShareToUser extends React.Component {
           </tbody>
         </table>
         <div className="share-list-container">
-          <table className="table-thead-hidden">
+          {this.state.isLoading ? (
-            <thead>
+            <Loading />
-              <tr>
+          ) : (
-                <th width="50%">{gettext('User')}</th>
+            <>
-                <th width="35%">{gettext('Permission')}</th>
+              {this.state.sharedItems.length === 0 ? (
-                <th width="15%"></th>
+                <EmptyTip text={gettext('No share link')} className="mt-8 mb-8" />
-              </tr>
+              ) : (
-            </thead>
+                <table className="table-thead-hidden">
-            <UserList
+                  <thead>
-              items={sharedItems}
+                    <tr>
-              permissions={this.permissions}
+                      <th width="50%">{gettext('User')}</th>
-              deleteShareItem={this.deleteShareItem}
+                      <th width="35%">{gettext('Permission')}</th>
-              onChangeUserPermission={this.onChangeUserPermission}
+                      <th width="15%"></th>
-            />
+                    </tr>
-          </table>
+                  </thead>
+                  <UserList
+                    items={sharedItems}
+                    permissions={this.permissions}
+                    deleteShareItem={this.deleteShareItem}
+                    onChangeUserPermission={this.onChangeUserPermission}
+                  />
+                </table>
+              )}
+            </>
+          )}
         </div>
       </Fragment>
     );

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,21 +205,31 @@ class LinkAuthenticatedEmails extends React.Component {
           </tbody>
         </table>
         <div className="share-list-container">
-          <table className="table-thead-hidden w-xs-200">
+          {this.state.isLoading ? (
-            {thead}
+            <Loading />
-            <tbody>
+          ) : (
-              {authEmails.map((item, index) => {
+            <>
-                return (
+              {authEmails.length === 0 ? (
-                  <EmailItem
+                <EmptyTip text={gettext('No results')} />
-                    key={index}
+              ) : (
-                    item={item}
+                <table className="table-thead-hidden w-xs-200">
-                    repoID={this.props.repoID}
+                  {thead}
-                    deleteItem={this.deleteItem}
+                  <tbody>
-                  />
+                    {authEmails.map((item, index) => {
-                );
+                      return (
-              })}
+                        <EmailItem
-            </tbody>
+                          key={index}
-          </table>
+                          item={item}
+                          repoID={this.props.repoID}
+                          deleteItem={this.deleteItem}
+                        />
+                      );
+                    })}
+                  </tbody>
+                </table>
+              )}
+            </>
+          )}
         </div>
       </Fragment>
     );

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,21 +206,31 @@ class LinkAuthenticatedUsers extends React.Component {
           </tbody>
         </table>
         <div className="share-list-container">
-          <table className="table-thead-hidden w-xs-200">
+          {this.state.isLoading ? (
-            {thead}
+            <Loading />
-            <tbody>
+          ) : (
-              {authUsers.map((item, index) => {
+            <>
-                return (
+              {authUsers.length === 0 ? (
-                  <UserItem
+                <EmptyTip text={gettext('No results')} />
-                    key={index}
+              ) : (
-                    item={item}
+                <table className="table-thead-hidden w-xs-200">
-                    repoID={this.props.repoID}
+                  {thead}
-                    deleteItem={this.deleteItem}
+                  <tbody>
-                  />
+                    {authUsers.map((item, index) => {
-                );
+                      return (
-              })}
+                        <UserItem
-            </tbody>
+                          key={index}
-          </table>
+                          item={item}
+                          repoID={this.props.repoID}
+                          deleteItem={this.deleteItem}
+                        />
+                      );
+                    })}
+                  </tbody>
+                </table>
+              )}
+            </>
+          )}
         </div>
       </Fragment>
     );