Add loading bar for user screen

GladysAssistant · Feb 19, 2021 · 57bfd21 · 57bfd21
1 parent a934676
commit 57bfd21
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 20 deletions.
diff --git a/front/src/routes/settings/settings-users/UserPage.jsx b/front/src/routes/settings/settings-users/UserPage.jsx
@@ -36,25 +36,30 @@ const UserPage = ({ children, ...props }) => (
         </Link>
       </div>
     </div>
-    <div class="row">
-      <div class="col-lg-12">
-        {props.users && props.users.length === 0 && (
-          <div class="alert alert-secondary">
-            <Text id="usersSettings.noUsersFound" />
-          </div>
-        )}
-        <div class="row row-cards">
-          {props.users &&
-            props.users.map((user, index) => (
-              <div class="col-md-4" key={user.id}>
-                <UserCard
-                  user={user}
-                  loggedUser={props.user}
-                  removeUserFromList={props.removeUserFromList}
-                  index={index}
-                />
+    <div class={props.loading ? 'dimmer active' : 'dimmer'} style={{ minHeight: '20rem' }}>
+      <div class="loader" />
+      <div class="dimmer-content">
+        <div class="row">
+          <div class="col-lg-12">
+            {props.users && props.users.length === 0 && (
+              <div class="alert alert-secondary">
+                <Text id="usersSettings.noUsersFound" />
               </div>
-            ))}
+            )}
+            <div class="row row-cards">
+              {props.users &&
+                props.users.map((user, index) => (
+                  <div class="col-md-4" key={user.id}>
+                    <UserCard
+                      user={user}
+                      loggedUser={props.user}
+                      removeUserFromList={props.removeUserFromList}
+                      index={index}
+                    />
+                  </div>
+                ))}
+            </div>
+          </div>
         </div>
       </div>
     </div>

diff --git a/front/src/routes/settings/settings-users/index.js b/front/src/routes/settings/settings-users/index.js
@@ -9,6 +9,7 @@ import SettingsLayout from '../SettingsLayout';
 class SettingsUsers extends Component {
   getUsers = async () => {
     try {
+      await this.setState({ loading: true });
       const params = {
         fields: 'id,firstname,lastname,selector,role,picture',
         order_dir: this.state.getUsersOrderDir || 'asc'
@@ -17,9 +18,10 @@ class SettingsUsers extends Component {
         params.search = this.state.userSearchTerms;
       }
       const users = await this.props.httpClient.get('/api/v1/user', params);
-      this.setState({ users });
+      this.setState({ users, loading: false });
     } catch (e) {
       console.error(e);
+      this.setState({ loading: false });
     }
   };
   search = async e => {
@@ -45,7 +47,7 @@ class SettingsUsers extends Component {
     this.getUsers();
   }
 
-  render(props, { users, userSearchTerms }) {
+  render(props, { users, userSearchTerms, loading }) {
     return (
       <SettingsLayout currentUrl={props.currentUrl}>
         <UserPage
@@ -55,6 +57,7 @@ class SettingsUsers extends Component {
           removeUserFromList={this.removeUserFromList}
           userSearchTerms={userSearchTerms}
           changeOrderDir={this.changeOrderDir}
+          loading={loading}
         />
       </SettingsLayout>
     );