Skip to content

refactor(site): Add skeletons for table loading state #6626

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Mar 16, 2023
Merged

refactor(site): Add skeletons for table loading state #6626

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
51012e6
refactor(site): Add skeletons for table loading state
BrunoQuaresma Mar 15, 2023
919e39d
Apply animation
BrunoQuaresma Mar 16, 2023
d864d07
Fix row height
BrunoQuaresma Mar 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion site/src/components/AvatarData/AvatarData.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,12 @@ export const AvatarData: FC<PropsWithChildren<AvatarDataProps>> = ({
}

return (
<Stack spacing={1.5} direction="row" alignItems="center">
<Stack
spacing={1.5}
direction="row"
alignItems="center"
className={styles.root}
>
{avatar}

<Stack spacing={0}>
Expand All @@ -35,6 +40,10 @@ export const AvatarData: FC<PropsWithChildren<AvatarDataProps>> = ({
}

const useStyles = makeStyles((theme) => ({
root: {
height: theme.spacing(5), // Make it predictable for the skeleton
},

title: {
color: theme.palette.text.primary,
fontWeight: 600,
Expand Down
16 changes: 16 additions & 0 deletions site/src/components/AvatarData/AvatarDataSkeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { FC } from "react"
import { Stack } from "components/Stack/Stack"
import { Skeleton } from "@material-ui/lab"

export const AvatarDataSkeleton: FC = () => {
return (
<Stack spacing={1.5} direction="row" alignItems="center">
<Skeleton variant="circle" width={36} height={36} />

<Stack spacing={0}>
<Skeleton variant="text" width={100} />
<Skeleton variant="text" width={60} />
</Stack>
</Stack>
)
}
35 changes: 35 additions & 0 deletions site/src/components/TableLoader/TableLoader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import { makeStyles } from "@material-ui/core/styles"
import TableCell from "@material-ui/core/TableCell"
import TableRow from "@material-ui/core/TableRow"
import Skeleton from "@material-ui/lab/Skeleton"
import { AvatarDataSkeleton } from "components/AvatarData/AvatarDataSkeleton"
import { FC } from "react"
import { Loader } from "../Loader/Loader"

Expand All @@ -22,3 +24,36 @@ const useStyles = makeStyles((theme) => ({
height: theme.spacing(20),
},
}))

export const TableLoaderSkeleton: FC<{
columns: number
rows?: number
useAvatarData?: boolean
}> = ({ columns, rows = 4, useAvatarData = false }) => {
const placeholderColumns = Array(columns).fill(undefined)
const placeholderRows = Array(rows).fill(undefined)

return (
<>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we add an accessibility attribute to indicate this is loading component, e.g. a progressbar role, or does MUI bake one into their skeleton component?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good question, I will take a look into that.

{placeholderRows.map((_, rowIndex) => (
<TableRow key={rowIndex}>
{placeholderColumns.map((_, columnIndex) => {
if (useAvatarData && columnIndex === 0) {
return (
<TableCell key={columnIndex}>
<AvatarDataSkeleton />
</TableCell>
)
}

return (
<TableCell key={columnIndex}>
<Skeleton variant="text" width="25%" />
</TableCell>
)
})}
</TableRow>
))}
</>
)
}
4 changes: 2 additions & 2 deletions site/src/components/UsersTable/UsersTableBody.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import * as TypesGen from "../../api/typesGenerated"
import { combineClasses } from "../../util/combineClasses"
import { AvatarData } from "../AvatarData/AvatarData"
import { EmptyState } from "../EmptyState/EmptyState"
import { TableLoader } from "../TableLoader/TableLoader"
import { TableLoaderSkeleton } from "../TableLoader/TableLoader"
import { TableRowMenu } from "../TableRowMenu/TableRowMenu"
import { EditRolesButton } from "components/EditRolesButton/EditRolesButton"
import { Stack } from "components/Stack/Stack"
Expand Down Expand Up @@ -70,7 +70,7 @@ export const UsersTableBody: FC<
return (
<ChooseOne>
<Cond condition={Boolean(isLoading)}>
<TableLoader />
<TableLoaderSkeleton columns={4} useAvatarData />
</Cond>
<Cond condition={!users || users.length === 0}>
<ChooseOne>
Expand Down
4 changes: 2 additions & 2 deletions site/src/components/WorkspacesTable/WorkspacesTableBody.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { TableEmpty } from "components/TableEmpty/TableEmpty"
import { FC } from "react"
import { useTranslation } from "react-i18next"
import { Link as RouterLink } from "react-router-dom"
import { TableLoader } from "../TableLoader/TableLoader"
import { TableLoaderSkeleton } from "../TableLoader/TableLoader"
import { WorkspacesRow } from "./WorkspacesRow"

interface TableBodyProps {
Expand All @@ -29,7 +29,7 @@ export const WorkspacesTableBody: FC<
}

if (!workspaces) {
return <TableLoader />
return <TableLoaderSkeleton columns={4} useAvatarData />
}

if (workspaces.length === 0) {
Expand Down
4 changes: 2 additions & 2 deletions site/src/pages/GroupsPage/GroupsPageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import { AvatarData } from "components/AvatarData/AvatarData"
import { ChooseOne, Cond } from "components/Conditionals/ChooseOne"
import { EmptyState } from "components/EmptyState/EmptyState"
import { Stack } from "components/Stack/Stack"
import { TableLoader } from "components/TableLoader/TableLoader"
import { TableLoaderSkeleton } from "components/TableLoader/TableLoader"
import { UserAvatar } from "components/UserAvatar/UserAvatar"
import { FC } from "react"
import { Link as RouterLink, useNavigate } from "react-router-dom"
Expand Down Expand Up @@ -83,7 +83,7 @@ export const GroupsPageView: FC<GroupsPageViewProps> = ({
<TableBody>
<ChooseOne>
<Cond condition={isLoading}>
<TableLoader />
<TableLoaderSkeleton columns={2} useAvatarData />
</Cond>

<Cond condition={isEmpty}>
Expand Down
4 changes: 2 additions & 2 deletions site/src/pages/TemplatesPage/TemplatesPageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ import {
PageHeaderTitle,
} from "../../components/PageHeader/PageHeader"
import { Stack } from "../../components/Stack/Stack"
import { TableLoader } from "../../components/TableLoader/TableLoader"
import { TableLoaderSkeleton } from "../../components/TableLoader/TableLoader"
import {
HelpTooltip,
HelpTooltipLink,
Expand Down Expand Up @@ -210,7 +210,7 @@ export const TemplatesPageView: FC<
</TableHead>
<TableBody>
<Maybe condition={isLoading}>
<TableLoader />
<TableLoaderSkeleton columns={4} useAvatarData />
</Maybe>

<ChooseOne>
Expand Down