Skip to content
Snippets Groups Projects
Unverified Commit e5834e96 authored by Hadi Cheaito's avatar Hadi Cheaito Committed by GitHub
Browse files

Adding placeholders to Banned, Pending, and Invited users page (#4784)

* Adding placeholders to Banned, Pending, and Invited users page

* clean
parent 31422956
Branches
Tags
No related merge requests found
...@@ -4,12 +4,13 @@ import { useTranslation } from 'react-i18next'; ...@@ -4,12 +4,13 @@ import { useTranslation } from 'react-i18next';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import BannedPendingRow from './BannedPendingRow'; import BannedPendingRow from './BannedPendingRow';
import EmptyUsersList from './EmptyUsersList'; import EmptyUsersList from './EmptyUsersList';
import ManageUsersPendingBannedRowPlaceHolder from './ManageUsersPendingBannedRowPlaceHolder';
// pendingTable prop is true when table is being used for pending data, false when table is being used for banned data // pendingTable prop is true when table is being used for pending data, false when table is being used for banned data
export default function BannedPendingUsersTable({ users, pendingTable }) { export default function BannedPendingUsersTable({ users, pendingTable, isLoading }) {
const { t } = useTranslation(); const { t } = useTranslation();
if (users.length === 0) { if (!isLoading && users.length === 0) {
if (pendingTable) { if (pendingTable) {
return <EmptyUsersList text={t('admin.manage_users.empty_pending_users')} subtext={t('admin.manage_users.empty_pending_users_subtext')} />; return <EmptyUsersList text={t('admin.manage_users.empty_pending_users')} subtext={t('admin.manage_users.empty_pending_users_subtext')} />;
} }
...@@ -26,12 +27,21 @@ export default function BannedPendingUsersTable({ users, pendingTable }) { ...@@ -26,12 +27,21 @@ export default function BannedPendingUsersTable({ users, pendingTable }) {
</tr> </tr>
</thead> </thead>
<tbody className="border-top-0"> <tbody className="border-top-0">
{users?.length {
isLoading
? (
// eslint-disable-next-line react/no-array-index-key
[...Array(5)].map((val, idx) => <ManageUsersPendingBannedRowPlaceHolder key={idx} />)
)
: (
users?.length
&& ( && (
users?.map((user) => ( users?.map((user) => (
<BannedPendingRow key={user.id} user={user} pendingTable={pendingTable} /> <BannedPendingRow key={user.id} user={user} pendingTable={pendingTable} />
)) ))
)} )
)
}
</tbody> </tbody>
</Table> </Table>
</div> </div>
...@@ -49,4 +59,5 @@ BannedPendingUsersTable.propTypes = { ...@@ -49,4 +59,5 @@ BannedPendingUsersTable.propTypes = {
name: PropTypes.string.isRequired, name: PropTypes.string.isRequired,
})), })),
pendingTable: PropTypes.bool.isRequired, pendingTable: PropTypes.bool.isRequired,
isLoading: PropTypes.bool.isRequired,
}; };
...@@ -21,7 +21,7 @@ export default function BannedUsers({ searchInput }) { ...@@ -21,7 +21,7 @@ export default function BannedUsers({ searchInput }) {
</div> </div>
) : ( ) : (
<div> <div>
<BannedPendingUsersTable users={bannedUsers?.data} pendingTable={false} /> <BannedPendingUsersTable users={bannedUsers?.data} pendingTable={false} isLoading={isLoading} />
{!isLoading {!isLoading
&& ( && (
<Pagination <Pagination
......
...@@ -10,11 +10,12 @@ import NoSearchResults from '../../shared_components/search/NoSearchResults'; ...@@ -10,11 +10,12 @@ import NoSearchResults from '../../shared_components/search/NoSearchResults';
import EmptyUsersList from './EmptyUsersList'; import EmptyUsersList from './EmptyUsersList';
import { localizeDateTimeString } from '../../../helpers/DateTimeHelper'; import { localizeDateTimeString } from '../../../helpers/DateTimeHelper';
import { useAuth } from '../../../contexts/auth/AuthProvider'; import { useAuth } from '../../../contexts/auth/AuthProvider';
import ManageUsersInvitedRowPlaceHolder from './ManageUsersInvitedRowPlaceHolder';
export default function InvitedUsers({ searchInput }) { export default function InvitedUsers({ searchInput }) {
const { t } = useTranslation(); const { t } = useTranslation();
const [page, setPage] = useState(); const [page, setPage] = useState();
const { data: invitations } = useInvitations(searchInput, page); const { isLoading, data: invitations } = useInvitations(searchInput, page);
const currentUser = useAuth(); const currentUser = useAuth();
if (!searchInput && invitations?.data?.length === 0) { if (!searchInput && invitations?.data?.length === 0) {
...@@ -24,7 +25,7 @@ export default function InvitedUsers({ searchInput }) { ...@@ -24,7 +25,7 @@ export default function InvitedUsers({ searchInput }) {
return ( return (
<div> <div>
{ {
(searchInput && invitations?.data.length === 0) (!isLoading && searchInput && invitations?.data.length === 0)
? ( ? (
<div className="mt-5"> <div className="mt-5">
<NoSearchResults text={t('user.search_not_found')} searchInput={searchInput} /> <NoSearchResults text={t('user.search_not_found')} searchInput={searchInput} />
...@@ -40,7 +41,14 @@ export default function InvitedUsers({ searchInput }) { ...@@ -40,7 +41,14 @@ export default function InvitedUsers({ searchInput }) {
</tr> </tr>
</thead> </thead>
<tbody className="border-top-0"> <tbody className="border-top-0">
{invitations?.data?.length {
isLoading
? (
// eslint-disable-next-line react/no-array-index-key
[...Array(5)].map((val, idx) => <ManageUsersInvitedRowPlaceHolder key={idx} />)
)
: (
invitations?.data?.length
&& ( && (
invitations?.data?.map((invitation) => ( invitations?.data?.map((invitation) => (
<tr key={invitation.email} className="align-middle text-muted"> <tr key={invitation.email} className="align-middle text-muted">
...@@ -51,7 +59,9 @@ export default function InvitedUsers({ searchInput }) { ...@@ -51,7 +59,9 @@ export default function InvitedUsers({ searchInput }) {
</td> </td>
</tr> </tr>
)) ))
)} )
)
}
</tbody> </tbody>
</Table> </Table>
<div className="pagination-wrapper"> <div className="pagination-wrapper">
......
import React from 'react';
import Placeholder from '../../shared_components/utilities/Placeholder';
export default function ManageUsersInvitedRowPlaceHolder() {
return (
<tr>
<td className="border-0 py-2 lg-td-placeholder">
<Placeholder width={10} size="md" />
</td>
<td className="border-0 py-3 lg-td-placeholder">
<Placeholder width={10} size="md" />
</td>
<td className="border-0 py-3 sm-td-placeholder">
<Placeholder width={5} size="md" />
</td>
</tr>
);
}
import React from 'react';
import { Stack } from 'react-bootstrap';
import Placeholder from '../../shared_components/utilities/Placeholder';
import RoundPlaceholder from '../../shared_components/utilities/RoundPlaceholder';
export default function ManageUsersPendingBannedRowPlaceHolder() {
return (
<tr>
<td className="border-0 py-2 lg-td-placeholder">
<Stack direction="horizontal">
<RoundPlaceholder size="small" className="ms-1 me-3 mt-1" />
<Stack>
<Placeholder width={10} size="md" />
<Placeholder width={10} size="md" />
</Stack>
</Stack>
</td>
<td className="border-0 py-3 lg-td-placeholder">
<Placeholder width={10} size="md" />
</td>
</tr>
);
}
...@@ -21,7 +21,7 @@ export default function PendingUsers({ searchInput }) { ...@@ -21,7 +21,7 @@ export default function PendingUsers({ searchInput }) {
</div> </div>
) : ( ) : (
<div> <div>
<BannedPendingUsersTable users={users?.data} pendingTable /> <BannedPendingUsersTable users={users?.data} pendingTable isLoading={isLoading} />
{!isLoading {!isLoading
&& ( && (
<Pagination <Pagination
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment