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

BrunoQuaresma · web-flow · commit ab90651a7e0b · 2023-03-16T13:06:15.000-03:00
diff --git a/site/src/components/AvatarData/AvatarData.tsx b/site/src/components/AvatarData/AvatarData.tsx
@@ -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}>
@@ -35,6 +40,10 @@ export const AvatarData: FC<PropsWithChildren<AvatarDataProps>> = ({
 }
 
 const useStyles = makeStyles((theme) => ({
+  root: {
+    minHeight: theme.spacing(5), // Make it predictable for the skeleton
+  },
+
   title: {
     color: theme.palette.text.primary,
     fontWeight: 600,
diff --git a/site/src/components/AvatarData/AvatarDataSkeleton.tsx b/site/src/components/AvatarData/AvatarDataSkeleton.tsx
@@ -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>
+  )
+}
diff --git a/site/src/components/TableLoader/TableLoader.tsx b/site/src/components/TableLoader/TableLoader.tsx
@@ -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"
 
@@ -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 (
+    <>
+      {placeholderRows.map((_, rowIndex) => (
+        <TableRow key={rowIndex} role="progressbar" data-testid="loader">
+          {placeholderColumns.map((_, columnIndex) => {
+            if (useAvatarData && columnIndex === 0) {
+              return (
+                <TableCell key={columnIndex}>
+                  <AvatarDataSkeleton />
+                </TableCell>
+              )
+            }
+
+            return (
+              <TableCell key={columnIndex}>
+                <Skeleton variant="text" width="25%" />
+              </TableCell>
+            )
+          })}
+        </TableRow>
+      ))}
+    </>
+  )
+}
diff --git a/site/src/components/UsersTable/UsersTableBody.tsx b/site/src/components/UsersTable/UsersTableBody.tsx
@@ -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"
@@ -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>
diff --git a/site/src/components/WorkspacesTable/WorkspacesTableBody.tsx b/site/src/components/WorkspacesTable/WorkspacesTableBody.tsx
@@ -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 {
@@ -29,7 +29,7 @@ export const WorkspacesTableBody: FC<
   }
 
   if (!workspaces) {
-    return <TableLoader />
+    return <TableLoaderSkeleton columns={4} useAvatarData />
   }
 
   if (workspaces.length === 0) {
diff --git a/site/src/pages/GroupsPage/GroupsPageView.tsx b/site/src/pages/GroupsPage/GroupsPageView.tsx
@@ -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"
@@ -83,7 +83,7 @@ export const GroupsPageView: FC<GroupsPageViewProps> = ({
               <TableBody>
                 <ChooseOne>
                   <Cond condition={isLoading}>
-                    <TableLoader />
+                    <TableLoaderSkeleton columns={2} useAvatarData />
                   </Cond>
 
                   <Cond condition={isEmpty}>
diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx
@@ -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,
@@ -210,7 +210,7 @@ export const TemplatesPageView: FC<
               </TableHead>
               <TableBody>
                 <Maybe condition={isLoading}>
-                  <TableLoader />
+                  <TableLoaderSkeleton columns={4} useAvatarData />
                 </Maybe>
 
                 <ChooseOne>
diff --git a/site/src/theme/props.ts b/site/src/theme/props.ts
@@ -41,4 +41,7 @@ export const props = {
   MuiPaper: {
     elevation: 0,
   },
+  MuiSkeleton: {
+    animation: "wave",
+  },
 } as ComponentsProps

Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,7 @@ import { TableEmpty } from "components/TableEmpty/TableEmpty"`
`8`	`8`	`import { FC } from "react"`
`9`	`9`	`import { useTranslation } from "react-i18next"`
`10`	`10`	`import { Link as RouterLink } from "react-router-dom"`
`11`		`-import { TableLoader } from "../TableLoader/TableLoader"`
	`11`	`+import { TableLoaderSkeleton } from "../TableLoader/TableLoader"`
`12`	`12`	`import { WorkspacesRow } from "./WorkspacesRow"`
`13`	`13`
`14`	`14`	`interface TableBodyProps {`
`@@ -29,7 +29,7 @@ export const WorkspacesTableBody: FC<`
`29`	`29`	`}`
`30`	`30`
`31`	`31`	`if (!workspaces) {`
`32`		`- return <TableLoader />`
	`32`	`+ return <TableLoaderSkeleton columns={4} useAvatarData />`
`33`	`33`	`}`
`34`	`34`
`35`	`35`	`if (workspaces.length === 0) {`