Add transition effect

client/coral-admin/src/routes/Community/components/FlaggedAccounts.css

@@ -14,3 +14,21 @@
   margin: 0;
   padding: 0;
 }
+
+.userLeave {
+  opacity: 1.0;
+}
+
+.userLeaveActive {
+  opacity: 0;
+  transition: opacity 800ms;
+}
+
+.userEnter {
+  opacity: 0;
+}
+
+.userEnterActive {
+  opacity: 1.0;
+  transition: opacity 800ms;
+}

client/coral-admin/src/routes/Community/components/FlaggedAccounts.js

@@ -1,59 +1,74 @@
 import React from 'react';
 
 import t from 'coral-framework/services/i18n';
-import styles from './FlaggedAccounts.css';
 import EmptyCard from 'coral-admin/src/components/EmptyCard';
 import LoadMore from '../../../components/LoadMore';
 import FlaggedUser from '../containers/FlaggedUser';
+import {CSSTransitionGroup} from 'react-transition-group';
+import styles from './FlaggedAccounts.css';
 
-const FlaggedAccounts = (props) => {
-  const {
-    users,
-    loadMore,
-    showBanUserDialog,
-    showSuspendUserDialog,
-    showRejectUsernameDialog,
-    approveUser,
-    me,
-    viewUserDetail,
-  } = props;
+class FlaggedAccounts extends React.Component {
+  render() {
+    const {
+      users,
+      loadMore,
+      showBanUserDialog,
+      showSuspendUserDialog,
+      showRejectUsernameDialog,
+      approveUser,
+      me,
+      viewUserDetail,
+    } = this.props;
 
-  const hasResults = users.nodes && !!users.nodes.length;
+    const hasResults = users.nodes && !!users.nodes.length;
 
-  return (
-    <div className={styles.container}>
-      <div className={styles.mainFlaggedContent}>
-        {
-          hasResults
-          ? <ul className={styles.list}>
-              {
-                users.nodes.map((user, index) => {
-                  return (
-                    <FlaggedUser
-                      user={user}
-                      key={index}
-                      index={index}
-                      modActionButtons={['APPROVE', 'REJECT']}
-                      showBanUserDialog={showBanUserDialog}
-                      showSuspendUserDialog={showSuspendUserDialog}
-                      showRejectUsernameDialog={showRejectUsernameDialog}
-                      approveUser={approveUser}
-                      me={me}
-                      viewUserDetail={viewUserDetail}
-                    />
-                  );
-                })
-              }
-            </ul>
-          : <EmptyCard>{t('community.no_flagged_accounts')}</EmptyCard>
-        }
-        <LoadMore
-          loadMore={loadMore}
-          showLoadMore={users.hasNextPage}
-          />
+    return (
+      <div className={styles.container}>
+        <div className={styles.mainFlaggedContent}>
+          {
+            hasResults
+            ? <CSSTransitionGroup
+                component={'ul'}
+                className={styles.list}
+                transitionName={{
+                  enter: styles.userEnter,
+                  enterActive: styles.userEnterActive,
+                  leave: styles.userLeave,
+                  leaveActive: styles.userLeaveActive,
+                }}
+                transitionEnter={true}
+                transitionLeave={true}
+                transitionEnterTimeout={100000}
+                transitionLeaveTimeout={100000}
+              >
+                {
+                  users.nodes.map((user) => {
+                    return (
+                      <FlaggedUser
+                        user={user}
+                        key={user.id}
+                        modActionButtons={['APPROVE', 'REJECT']}
+                        showBanUserDialog={showBanUserDialog}
+                        showSuspendUserDialog={showSuspendUserDialog}
+                        showRejectUsernameDialog={showRejectUsernameDialog}
+                        approveUser={approveUser}
+                        me={me}
+                        viewUserDetail={viewUserDetail}
+                      />
+                    );
+                  })
+                }
+              </CSSTransitionGroup>
+            : <EmptyCard>{t('community.no_flagged_accounts')}</EmptyCard>
+          }
+          <LoadMore
+            loadMore={loadMore}
+            showLoadMore={users.hasNextPage}
+            />
+        </div>
       </div>
-    </div>
-  );
-};
+    );
+  }
+}
 
 export default FlaggedAccounts;

client/coral-admin/src/routes/Community/components/FlaggedUser.css

@@ -9,7 +9,7 @@
   min-width: 400px;
   margin: 0 auto;
   position: relative;
-  transition: all 200ms;
+  transition: box-shadow 200ms, margin-bottom 200ms;
   padding: 10px 0 0;
   min-height: 220px;
 

client/coral-admin/src/routes/Moderation/components/styles.css

@@ -449,20 +449,20 @@ span {
 
 .commentLeave {
   opacity: 1.0;
-  transition: opacity 800ms;
 }
 
 .commentLeaveActive {
   opacity: 0;
+  transition: opacity 800ms;
 }
 
 .commentEnter {
   opacity: 0;
-  transition: opacity 800ms;
 }
 
 .commentEnterActive {
   opacity: 1.0;
+  transition: opacity 800ms;
 }
 
 .editedMarker {