12.0 change libraries page loading icon (#6092)

* 12.0 change libraries page loading icon

s optimise codes

* change loading icon style

frontend/src/pages/libraries/index.js

@@ -36,61 +36,41 @@ class Libraries extends Component {
       isSortOptionsDialogOpen: false,
       sortBy: cookie.load('seafile-repo-dir-sort-by') || 'name', // 'name' or 'time' or 'size'
       sortOrder: cookie.load('seafile-repo-dir-sort-order') || 'asc', // 'asc' or 'desc'
-
       isGuideForNewDialogOpen: window.app.pageOptions.guideEnabled,
-
-      // for 'groups'
-      isGroupsLoading: true,
-      groupsErrorMsg: '',
       groupList: [],
-
-      // for 'shared'
       sharedRepoList:[],
-      isSharedLoading: true,
-
-      // for 'public'
       publicRepoList: [],
-      isPublicLoading: true,
     };
   }
 
   componentDidMount() {
-    this.listMyLibs();
+    const promiseListRepos = seafileAPI.listRepos({ 'type': ['mine', 'shared', 'public'] });
-    this.listGroups();
+    const promiseListGroups = seafileAPI.listGroups(true);
-  }
+    Promise.all([promiseListRepos, promiseListGroups]).then(res => {
-
+      const [resListRepos, resListGroups] = res;
-  listMyLibs = () => {
+      const allRepoList = resListRepos.data.repos.map((item) => new Repo(item));
-    seafileAPI.listRepos({'type':['mine', 'shared', 'public']}).then((res) => {
+      const myRepoList = allRepoList.filter(item => item.type === 'mine');
-      let allRepoList = res.data.repos.map((item) => {
+      const sharedRepoList = allRepoList.filter(item => item.type === 'shared');
-        return new Repo(item);
+      const publicRepoList = allRepoList.filter(item => item.type === 'public');
-      });
+      const groupList = resListGroups.data.map(item => {
-      let myRepoList = allRepoList.filter(item => {
+        let group = new Group(item);
-        return item.type === 'mine';
+        group.repos = item.repos.map(item => new Repo(item));
-      });
+        return group;
-      let sharedRepoList = allRepoList.filter(item => {
+      }).sort((a, b) => a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1 );
-        return item.type === 'shared';
-      });
-      let publicRepoList = allRepoList.filter(item => {
-        return item.type === 'public';
-      });
       this.setState({
         isLoading: false,
-        sharedRepoList: sharedRepoList,
+        groupList,
-        publicRepoList: publicRepoList,
+        sharedRepoList,
+        publicRepoList,
         repoList: Utils.sortRepos(myRepoList, this.state.sortBy, this.state.sortOrder),
-      },() => {
-        this.setState({
-          isSharedLoading: false,
-          isPublicLoading: false
-        });
       });
     }).catch((error) => {
       this.setState({
         isLoading: false,
-        errorMsg: Utils.getErrorMsg(error, true), // true: show login tip if 403
+        errorMsg: Utils.getErrorMsg(error, true),
       });
     });
-  };
+  }
 
   toggleSortOptionsDialog = () => {
     this.setState({
@@ -170,30 +150,6 @@ class Libraries extends Component {
   };
 
   // the following are for 'groups'
-  listGroups = () => {
-    seafileAPI.listGroups(true).then((res) => {
-      // `{'with_repos': 1}`: list repos of every group
-      let groupList = res.data.map(item => {
-        let group = new Group(item);
-        group.repos = item.repos.map(item => {
-          return new Repo(item);
-        });
-        return group;
-      });
-      this.setState({
-        isGroupsLoading: false,
-        groupList: groupList.sort((a, b) => {
-          return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1;
-        })
-      });
-    }).catch((error) => {
-      this.setState({
-        isGroupsLoading: false,
-        groupsErrorMsg: Utils.getErrorMsg(error, true) // true: show login tip if 403
-      });
-    });
-  };
-
   onCreateGroup = (groupData) => {
     const newGroup = new Group(groupData);
     const { groupList: newList } = this.state;
@@ -216,7 +172,7 @@ class Libraries extends Component {
   };
 
   render() {
-
+    const { isLoading } = this.state;
     return (
       <Fragment>
         <TopToolbar
@@ -233,6 +189,8 @@ class Libraries extends Component {
             <div className="cur-view-path">
               <h3 className="sf-heading m-0">{gettext('Files')}</h3>
             </div>
+            {isLoading ?
+              <Loading /> :
               <div className="cur-view-content" id="files-content-container">
 
                 <table aria-hidden={true} className="my-3">
@@ -256,10 +214,11 @@ class Libraries extends Component {
                         <span className="sf3-font-mine sf3-font nav-icon" aria-hidden="true"></span>
                         {gettext('My Libraries')}
                       </h4>
-                    {(!Utils.isDesktop() && this.state.repoList.length > 0) && <span className="sf3-font sf3-font-sort action-icon" onClick={this.toggleSortOptionsDialog}></span>}
+                      {(!Utils.isDesktop() && this.state.repoList.length > 0) &&
+                        <span className="sf3-font sf3-font-sort action-icon" onClick={this.toggleSortOptionsDialog}></span>
+                      }
                     </div>
-                  {this.state.isLoading ? <Loading /> : (
+                    {this.state.errorMsg ? <p className="error text-center mt-8">{this.state.errorMsg}</p> : (
-                    this.state.errorMsg ? <p className="error text-center mt-8">{this.state.errorMsg}</p> : (
                       this.state.repoList.length === 0 ? (
                         <p className="libraries-empty-tip">{gettext('No libraries')}</p>
                       ) : (
@@ -275,31 +234,20 @@ class Libraries extends Component {
                           sortRepoList={this.sortRepoList}
                           inAllLibs={true}
                         />
-                      )))}
+                      ))
-                </div>
-              )}
-
-              <div className="pb-3">
-                {!this.state.isSharedLoading &&
-                  <SharedLibs
-                    inAllLibs={true}
-                    repoList={this.state.sharedRepoList} />
                     }
                   </div>
-
-              {canViewOrg && !this.state.isPublicLoading && (
-                <div className="pb-3">
-                  <SharedWithAll
-                    inAllLibs={true}
-                    repoList={this.state.publicRepoList}
-                  />
-                </div>
                 )}
-
+                <div className="pb-3">
+                  <SharedLibs inAllLibs={true} repoList={this.state.sharedRepoList} />
+                </div>
+                {canViewOrg &&
+                  <div className="pb-3">
+                    <SharedWithAll inAllLibs={true} repoList={this.state.publicRepoList} />
+                  </div>
+                }
                 <div className="group-list-panel">
-                {this.state.isGroupsLoading? <Loading /> : (
+                  {this.state.groupList.length > 0 && (
-                  this.state.groupsErrorMsg ? <p className="error text-center mt-8">{this.state.groupsErrorMsg}</p> : (
-                    this.state.groupList.length > 0 && (
                     this.state.groupList.map((group, index) => {
                       return (
                         <GroupItem
@@ -309,12 +257,12 @@ class Libraries extends Component {
                         />
                       );
                     })
-                    )))}
+                  )}
-              </div>
-
                 </div>
               </div>
-          {!this.state.isLoading && !this.state.errorMsg && this.state.isGuideForNewDialogOpen &&
+            }
+          </div>
+          {!isLoading && !this.state.errorMsg && this.state.isGuideForNewDialogOpen &&
             <GuideForNewDialog
               toggleDialog={this.toggleGuideForNewDialog}
             />