diff --git a/client/coral-admin/src/routes/Community/components/FlaggedAccounts.css b/client/coral-admin/src/routes/Community/components/FlaggedAccounts.css index fef9aabd8..4e9600cbd 100644 --- a/client/coral-admin/src/routes/Community/components/FlaggedAccounts.css +++ b/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; +} diff --git a/client/coral-admin/src/routes/Community/components/FlaggedAccounts.js b/client/coral-admin/src/routes/Community/components/FlaggedAccounts.js index 8687226db..328e1789d 100644 --- a/client/coral-admin/src/routes/Community/components/FlaggedAccounts.js +++ b/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 ( -