Skip to content

Commit b95a643

Browse files
BrunoQuaresmaBrunoQuaresma
committed
Remove feature checks and improve loading stat
1 parent 15fc3db commit b95a643

File tree

8 files changed

+201
-108
lines changed

8 files changed

+201
-108
lines changed

‎site/src/components/TableLoader/TableLoader.tsx

Lines changed: 20 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
import { makeStyles } from "@mui/styles"
22
import TableCell from "@mui/material/TableCell"
3-
import TableRow from "@mui/material/TableRow"
4-
import Skeleton from "@mui/material/Skeleton"
5-
import { AvatarDataSkeleton } from "components/AvatarData/AvatarDataSkeleton"
6-
import { FC } from "react"
3+
import TableRow, { TableRowProps } from "@mui/material/TableRow"
4+
import { FC, ReactNode, cloneElement, isValidElement } from "react"
75
import { Loader } from "../Loader/Loader"
86

97
export const TableLoader: FC = () => {
@@ -25,35 +23,27 @@ const useStyles = makeStyles((theme) => ({
2523
},
2624
}))
2725

28-
export const TableLoaderSkeleton: FC<{
29-
columns: number
26+
export const TableLoaderSkeleton = ({
27+
rows = 4,
28+
children,
29+
}: {
3030
rows?: number
31-
useAvatarData?: boolean
32-
}> = ({ columns, rows = 4, useAvatarData = false }) => {
33-
const placeholderColumns = Array(columns).fill(undefined)
34-
const placeholderRows = Array(rows).fill(undefined)
35-
31+
children: ReactNode
32+
}) => {
33+
if (!isValidElement(children)) {
34+
throw new Error(
35+
"TableLoaderSkeleton children must be a valid React element",
36+
)
37+
}
3638
return (
3739
<>
38-
{placeholderRows.map((_, rowIndex) => (
39-
<TableRow key={rowIndex} role="progressbar" data-testid="loader">
40-
{placeholderColumns.map((_, columnIndex) => {
41-
if (useAvatarData && columnIndex === 0) {
42-
return (
43-
<TableCell key={columnIndex}>
44-
<AvatarDataSkeleton />
45-
</TableCell>
46-
)
47-
}
48-
49-
return (
50-
<TableCell key={columnIndex}>
51-
<Skeleton variant="text" width="25%" />
52-
</TableCell>
53-
)
54-
})}
55-
</TableRow>
56-
))}
40+
{Array.from({ length: rows }, (_, i) =>
41+
cloneElement(children, { key: i }),
42+
)}
5743
</>
5844
)
5945
}
46+
47+
export const TableRowSkeleton = (props: TableRowProps) => {
48+
return <TableRow role="progressbar" data-testid="loader" {...props} />
49+
}

‎site/src/components/UsersTable/UsersTableBody.tsx

Lines changed: 33 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,16 @@ import * as TypesGen from "../../api/typesGenerated"
1111
import { combineClasses } from "../../utils/combineClasses"
1212
import { AvatarData } from "../AvatarData/AvatarData"
1313
import { EmptyState } from "../EmptyState/EmptyState"
14-
import { TableLoaderSkeleton } from "../TableLoader/TableLoader"
14+
import {
15+
TableLoaderSkeleton,
16+
TableRowSkeleton,
17+
} from "../TableLoader/TableLoader"
1518
import { TableRowMenu } from "../TableRowMenu/TableRowMenu"
1619
import { EditRolesButton } from "components/EditRolesButton/EditRolesButton"
1720
import { Stack } from "components/Stack/Stack"
1821
import { EnterpriseBadge } from "components/DeploySettingsLayout/Badges"
22+
import Skeleton from "@mui/material/Skeleton"
23+
import { AvatarDataSkeleton } from "components/AvatarData/AvatarDataSkeleton"
1924

2025
const isOwnerRole = (role: TypesGen.Role): boolean => {
2126
return role.name === "owner"
@@ -80,7 +85,7 @@ export const UsersTableBody: FC<
8085
return (
8186
<ChooseOne>
8287
<Cond condition={Boolean(isLoading)}>
83-
<TableLoaderSkeleton columns={5} useAvatarData />
88+
<TableLoader />
8489
</Cond>
8590
<Cond condition={!users || users.length === 0}>
8691
<ChooseOne>
@@ -252,3 +257,29 @@ const useStyles = makeStyles((theme) => ({
252257
borderColor: theme.palette.info.light,
253258
},
254259
}))
260+
261+
const TableLoader = () => {
262+
return (
263+
<TableLoaderSkeleton>
264+
<TableRowSkeleton>
265+
<TableCell>
266+
<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
267+
<AvatarDataSkeleton />
268+
</Box>
269+
</TableCell>
270+
<TableCell>
271+
<Skeleton variant="text" width="25%" />
272+
</TableCell>
273+
<TableCell>
274+
<Skeleton variant="text" width="25%" />
275+
</TableCell>
276+
<TableCell>
277+
<Skeleton variant="text" width="25%" />
278+
</TableCell>
279+
<TableCell>
280+
<Skeleton variant="text" width="25%" />
281+
</TableCell>
282+
</TableRowSkeleton>
283+
</TableLoaderSkeleton>
284+
)
285+
}

‎site/src/pages/GroupsPage/GroupsPageView.tsx

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,20 @@ import { AvatarData } from "components/AvatarData/AvatarData"
1515
import { ChooseOne, Cond } from "components/Conditionals/ChooseOne"
1616
import { EmptyState } from "components/EmptyState/EmptyState"
1717
import { Stack } from "components/Stack/Stack"
18-
import { TableLoaderSkeleton } from "components/TableLoader/TableLoader"
18+
import {
19+
TableLoaderSkeleton,
20+
TableRowSkeleton,
21+
} from "components/TableLoader/TableLoader"
1922
import { UserAvatar } from "components/UserAvatar/UserAvatar"
2023
import { FC } from "react"
2124
import { Link as RouterLink, useNavigate } from "react-router-dom"
2225
import { Paywall } from "components/Paywall/Paywall"
2326
import { Group } from "api/typesGenerated"
2427
import { GroupAvatar } from "components/GroupAvatar/GroupAvatar"
2528
import { docs } from "utils/docs"
29+
import Skeleton from "@mui/material/Skeleton"
30+
import { Box } from "@mui/system"
31+
import { AvatarDataSkeleton } from "components/AvatarData/AvatarDataSkeleton"
2632

2733
export type GroupsPageViewProps = {
2834
groups: Group[] | undefined
@@ -83,7 +89,7 @@ export const GroupsPageView: FC<GroupsPageViewProps> = ({
8389
<TableBody>
8490
<ChooseOne>
8591
<Cond condition={isLoading}>
86-
<TableLoaderSkeleton columns={3} useAvatarData />
92+
<TableLoader />
8793
</Cond>
8894

8995
<Cond condition={isEmpty}>
@@ -184,6 +190,26 @@ export const GroupsPageView: FC<GroupsPageViewProps> = ({
184190
)
185191
}
186192

193+
const TableLoader = () => {
194+
return (
195+
<TableLoaderSkeleton>
196+
<TableRowSkeleton>
197+
<TableCell>
198+
<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
199+
<AvatarDataSkeleton />
200+
</Box>
201+
</TableCell>
202+
<TableCell>
203+
<Skeleton variant="text" width="25%" />
204+
</TableCell>
205+
<TableCell>
206+
<Skeleton variant="text" width="25%" />
207+
</TableCell>
208+
</TableRowSkeleton>
209+
</TableLoaderSkeleton>
210+
)
211+
}
212+
187213
const useStyles = makeStyles((theme) => ({
188214
clickableTableRow: {
189215
cursor: "pointer",

‎site/src/pages/TemplatesPage/TemplatesPageView.tsx

Lines changed: 34 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,10 @@ import {
2424
PageHeaderTitle,
2525
} from "../../components/PageHeader/PageHeader"
2626
import { Stack } from "../../components/Stack/Stack"
27-
import { TableLoaderSkeleton } from "../../components/TableLoader/TableLoader"
27+
import {
28+
TableLoaderSkeleton,
29+
TableRowSkeleton,
30+
} from "../../components/TableLoader/TableLoader"
2831
import {
2932
HelpTooltip,
3033
HelpTooltipLink,
@@ -42,6 +45,9 @@ import ArrowForwardOutlined from "@mui/icons-material/ArrowForwardOutlined"
4245
import { Avatar } from "components/Avatar/Avatar"
4346
import { ErrorAlert } from "components/Alert/ErrorAlert"
4447
import { docs } from "utils/docs"
48+
import Skeleton from "@mui/material/Skeleton"
49+
import { Box } from "@mui/system"
50+
import { AvatarDataSkeleton } from "components/AvatarData/AvatarDataSkeleton"
4551

4652
export const Language = {
4753
developerCount: (activeCount: number): string => {
@@ -196,7 +202,7 @@ export const TemplatesPageView: FC<
196202
</TableHead>
197203
<TableBody>
198204
<Maybe condition={isLoading}>
199-
<TableLoaderSkeleton columns={5} useAvatarData />
205+
<TableLoader />
200206
</Maybe>
201207

202208
<ChooseOne>
@@ -222,6 +228,32 @@ export const TemplatesPageView: FC<
222228
)
223229
}
224230

231+
const TableLoader = () => {
232+
return (
233+
<TableLoaderSkeleton>
234+
<TableRowSkeleton>
235+
<TableCell>
236+
<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
237+
<AvatarDataSkeleton />
238+
</Box>
239+
</TableCell>
240+
<TableCell>
241+
<Skeleton variant="text" width="25%" />
242+
</TableCell>
243+
<TableCell>
244+
<Skeleton variant="text" width="25%" />
245+
</TableCell>
246+
<TableCell>
247+
<Skeleton variant="text" width="25%" />
248+
</TableCell>
249+
<TableCell>
250+
<Skeleton variant="text" width="25%" />
251+
</TableCell>
252+
</TableRowSkeleton>
253+
</TableLoaderSkeleton>
254+
)
255+
}
256+
225257
const useStyles = makeStyles((theme) => ({
226258
templateIconWrapper: {
227259
// Same size then the avatar component

‎site/src/pages/WorkspacesPage/WorkspacesPage.tsx

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
import { usePagination } from "hooks/usePagination"
22
import { Workspace } from "api/typesGenerated"
3-
import {
4-
useDashboard,
5-
useIsWorkspaceActionsEnabled,
6-
} from "components/Dashboard/DashboardProvider"
3+
import { useIsWorkspaceActionsEnabled } from "components/Dashboard/DashboardProvider"
74
import { FC, useEffect, useState } from "react"
85
import { Helmet } from "react-helmet-async"
96
import { pageTitle } from "utils/page"
@@ -68,10 +65,6 @@ const WorkspacesPage: FC = () => {
6865
const [checkedWorkspaces, setCheckedWorkspaces] = useState<Workspace[]>([])
6966
const [isDeletingAll, setIsDeletingAll] = useState(false)
7067
const [urlSearchParams] = searchParamsResult
71-
const dashboard = useDashboard()
72-
const isWorkspaceBatchActionsEnabled =
73-
dashboard.experiments.includes("workspaces_batch_actions") ||
74-
process.env.NODE_ENV === "development"
7568

7669
// We want to uncheck the selected workspaces always when the url changes
7770
// because of filtering or pagination
@@ -86,7 +79,6 @@ const WorkspacesPage: FC = () => {
8679
</Helmet>
8780

8881
<WorkspacesPageView
89-
isWorkspaceBatchActionsEnabled={isWorkspaceBatchActionsEnabled}
9082
checkedWorkspaces={checkedWorkspaces}
9183
onCheckChange={setCheckedWorkspaces}
9284
workspaces={data?.workspaces}

‎site/src/pages/WorkspacesPage/WorkspacesPageView.tsx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,6 @@ export interface WorkspacesPageViewProps {
4444
filterProps: ComponentProps<typeof WorkspacesFilter>
4545
page: number
4646
limit: number
47-
isWorkspaceBatchActionsEnabled?: boolean
4847
onPageChange: (page: number) => void
4948
onUpdateWorkspace: (workspace: Workspace) => void
5049
onCheckChange: (checkedWorkspaces: Workspace[]) => void
@@ -64,7 +63,6 @@ export const WorkspacesPageView: FC<
6463
onUpdateWorkspace,
6564
page,
6665
checkedWorkspaces,
67-
isWorkspaceBatchActionsEnabled,
6866
onCheckChange,
6967
onDeleteAll,
7068
}) => {
@@ -151,7 +149,6 @@ export const WorkspacesPageView: FC<
151149
onUpdateWorkspace={onUpdateWorkspace}
152150
checkedWorkspaces={checkedWorkspaces}
153151
onCheckChange={onCheckChange}
154-
isWorkspaceBatchActionsEnabled={isWorkspaceBatchActionsEnabled}
155152
/>
156153
{count !== undefined && (
157154
<PaginationWidgetBase

0 commit comments

Comments
 (0)