Skip to content

Commit af8eabb

Browse files
pashidlospashidlos
committed
List animation added
1 parent 04a0ae0 commit af8eabb

File tree

5 files changed

+158
-108
lines changed

5 files changed

+158
-108
lines changed

‎src/components/BuildList.tsx‎

Lines changed: 58 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import {
2121
selectBuild,
2222
} from "../contexts";
2323
import { BuildStatusChip } from "./BuildStatusChip";
24+
import { SkeletonList } from "./SkeletonList";
2425

2526
const useStyles = makeStyles((theme: Theme) =>
2627
createStyles({
@@ -38,67 +39,73 @@ const useStyles = makeStyles((theme: Theme) =>
3839
const BuildList: FunctionComponent = () => {
3940
const classes = useStyles();
4041
const history = useHistory();
41-
const { buildList, selectedBuildId } = useBuildState();
42+
const { buildList, selectedBuildId, loading } = useBuildState();
4243
const buildDispatch = useBuildDispatch();
4344

4445
return (
4546
<List>
46-
{buildList.map((build) => (
47-
<ListItem
48-
key={build.id}
49-
selected={selectedBuildId === build.id}
50-
button
51-
onClick={() => {
52-
selectBuild(buildDispatch, build.id);
53-
history.push({
54-
search: "buildId=" + build.id,
55-
});
56-
}}
57-
classes={{
58-
container: classes.listItem,
59-
}}
60-
>
61-
<ListItemText
62-
disableTypography
63-
primary={
64-
<Grid container>
65-
<Grid item>
66-
<Typography variant="subtitle2">{`#${build.id}`}</Typography>
67-
</Grid>
68-
</Grid>
69-
}
70-
secondary={
71-
<Grid container direction="column">
72-
<Grid item>
73-
<Typography variant="caption" color="textPrimary">
74-
{build.createdAt}
75-
</Typography>
47+
{loading ? (
48+
<SkeletonList />
49+
) : (
50+
buildList.map((build) => (
51+
<ListItem
52+
key={build.id}
53+
selected={selectedBuildId === build.id}
54+
button
55+
onClick={() => {
56+
selectBuild(buildDispatch, build.id);
57+
history.push({
58+
search: "buildId=" + build.id,
59+
});
60+
}}
61+
classes={{
62+
container: classes.listItem,
63+
}}
64+
>
65+
<ListItemText
66+
disableTypography
67+
primary={
68+
<Grid container>
69+
<Grid item>
70+
<Typography variant="subtitle2">{`#${build.id}`}</Typography>
71+
</Grid>
7672
</Grid>
77-
<Grid item>
78-
<Grid container justify="space-between">
79-
<Grid item>
80-
<Chip size="small" label={build.branchName} />
81-
</Grid>
82-
<Grid item>
83-
<BuildStatusChip status={build.status} />
73+
}
74+
secondary={
75+
<Grid container direction="column">
76+
<Grid item>
77+
<Typography variant="caption" color="textPrimary">
78+
{build.createdAt}
79+
</Typography>
80+
</Grid>
81+
<Grid item>
82+
<Grid container justify="space-between">
83+
<Grid item>
84+
<Chip size="small" label={build.branchName} />
85+
</Grid>
86+
<Grid item>
87+
<BuildStatusChip status={build.status} />
88+
</Grid>
8489
</Grid>
8590
</Grid>
8691
</Grid>
87-
</Grid>
88-
}
89-
/>
92+
}
93+
/>
9094

91-
<ListItemSecondaryAction className={classes.listItemSecondaryAction}>
92-
<IconButton
93-
onClick={() => {
94-
deleteBuild(buildDispatch, build.id);
95-
}}
95+
<ListItemSecondaryAction
96+
className={classes.listItemSecondaryAction}
9697
>
97-
<Delete />
98-
</IconButton>
99-
</ListItemSecondaryAction>
100-
</ListItem>
101-
))}
98+
<IconButton
99+
onClick={() => {
100+
deleteBuild(buildDispatch, build.id);
101+
}}
102+
>
103+
<Delete />
104+
</IconButton>
105+
</ListItemSecondaryAction>
106+
</ListItem>
107+
))
108+
)}
102109
</List>
103110
);
104111
};

‎src/components/SkeletonList.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from "react";
2+
import { Box } from "@material-ui/core";
3+
import { Skeleton } from "@material-ui/lab";
4+
5+
export const SkeletonList: React.FunctionComponent = () => {
6+
return (
7+
<React.Fragment>
8+
{[...Array(9)].map((i) => (
9+
<Box p={0.5}>
10+
<Skeleton variant="rect" height={80} />
11+
</Box>
12+
))}
13+
</React.Fragment>
14+
);
15+
};

‎src/components/TestRunList.tsx‎

Lines changed: 69 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
IconButton,
1111
Menu,
1212
MenuItem,
13+
Box,
1314
} from "@material-ui/core";
1415
import { MoreVert } from "@material-ui/icons";
1516
import { useHistory } from "react-router-dom";
@@ -22,11 +23,13 @@ import {
2223
deleteTestRun,
2324
selectTestRun,
2425
} from "../contexts";
26+
import { Skeleton } from "@material-ui/lab";
27+
import { SkeletonList } from "./SkeletonList";
2528

2629
const TestRunList: React.FunctionComponent<{
2730
items: TestRun[];
2831
}> = ({ items }) => {
29-
const { selectedTestRunId } = useTestRunState();
32+
const { selectedTestRunId, loading } = useTestRunState();
3033
const testRunDispatch = useTestRunDispatch();
3134
const history = useHistory();
3235
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
@@ -49,59 +52,72 @@ const TestRunList: React.FunctionComponent<{
4952

5053
return (
5154
<React.Fragment>
52-
<TableContainer>
53-
<Table>
54-
<TableHead>
55-
<TableRow>
56-
<TableCell>Name</TableCell>
57-
<TableCell>OS</TableCell>
58-
<TableCell>Device</TableCell>
59-
<TableCell>Browser</TableCell>
60-
<TableCell>Viewport</TableCell>
61-
<TableCell>Status</TableCell>
62-
<TableCell></TableCell>
63-
</TableRow>
64-
</TableHead>
65-
<TableBody>
66-
{items.map((test) => (
67-
<TableRow
68-
key={test.id}
69-
hover
70-
selected={test.id === selectedTestRunId}
71-
>
72-
<TableCell
73-
onClick={() => {
74-
history.push(buildTestRunLocation(test));
75-
selectTestRun(testRunDispatch, test.id)
76-
}}
77-
>
78-
<Typography>{test.name}</Typography>
79-
</TableCell>
80-
<TableCell>
81-
<Typography>{test.os}</Typography>
82-
</TableCell>
83-
<TableCell>
84-
<Typography>{test.device}</Typography>
85-
</TableCell>
86-
<TableCell>
87-
<Typography>{test.browser}</Typography>
88-
</TableCell>
89-
<TableCell>
90-
<Typography>{test.viewport}</Typography>
91-
</TableCell>
92-
<TableCell>
93-
<TestStatusChip status={test.status} />
94-
</TableCell>
95-
<TableCell>
96-
<IconButton onClick={(event) => handleClick(event, test)}>
97-
<MoreVert />
98-
</IconButton>
99-
</TableCell>
55+
{loading ? (
56+
<SkeletonList />
57+
) : (
58+
<TableContainer>
59+
<Table>
60+
<TableHead>
61+
<TableRow>
62+
<TableCell>Name</TableCell>
63+
<TableCell>OS</TableCell>
64+
<TableCell>Device</TableCell>
65+
<TableCell>Browser</TableCell>
66+
<TableCell>Viewport</TableCell>
67+
<TableCell>Status</TableCell>
68+
<TableCell></TableCell>
10069
</TableRow>
101-
))}
102-
</TableBody>
103-
</Table>
104-
</TableContainer>
70+
</TableHead>
71+
{loading ? (
72+
[...Array(10)].map((i) => (
73+
<Box p={0.5}>
74+
<Skeleton variant="rect" height={100} />
75+
</Box>
76+
))
77+
) : (
78+
<TableBody>
79+
{items.map((test) => (
80+
<TableRow
81+
key={test.id}
82+
hover
83+
selected={test.id === selectedTestRunId}
84+
>
85+
<TableCell
86+
onClick={() => {
87+
history.push(buildTestRunLocation(test));
88+
selectTestRun(testRunDispatch, test.id);
89+
}}
90+
>
91+
<Typography>{test.name}</Typography>
92+
</TableCell>
93+
<TableCell>
94+
<Typography>{test.os}</Typography>
95+
</TableCell>
96+
<TableCell>
97+
<Typography>{test.device}</Typography>
98+
</TableCell>
99+
<TableCell>
100+
<Typography>{test.browser}</Typography>
101+
</TableCell>
102+
<TableCell>
103+
<Typography>{test.viewport}</Typography>
104+
</TableCell>
105+
<TableCell>
106+
<TestStatusChip status={test.status} />
107+
</TableCell>
108+
<TableCell>
109+
<IconButton onClick={(event) => handleClick(event, test)}>
110+
<MoreVert />
111+
</IconButton>
112+
</TableCell>
113+
</TableRow>
114+
))}
115+
</TableBody>
116+
)}
117+
</Table>
118+
</TableContainer>
119+
)}
120+
105121
{selectedTestRun && (
106122
<Menu
107123
anchorEl={anchorEl}

‎src/contexts/build.context.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ type Dispatch = (action: IAction) => void;
3838
type State = {
3939
selectedBuildId: string | undefined;
4040
buildList: Build[];
41+
loading: boolean;
4142
};
4243

4344
type BuildProviderProps = { children: React.ReactNode };
@@ -50,6 +51,7 @@ const BuildDispatchContext = React.createContext<Dispatch | undefined>(
5051
const initialState: State = {
5152
selectedBuildId: undefined,
5253
buildList: [],
54+
loading: false,
5355
};
5456

5557
function buildReducer(state: State, action: IAction): State {
@@ -59,10 +61,16 @@ function buildReducer(state: State, action: IAction): State {
5961
...state,
6062
selectedBuildId: action.payload,
6163
};
64+
case "request":
65+
return {
66+
...state,
67+
loading: true,
68+
};
6269
case "get":
6370
return {
6471
...state,
6572
buildList: action.payload,
73+
loading: false,
6674
};
6775
case "delete":
6876
return {
@@ -121,8 +129,6 @@ async function getBuildList(dispatch: Dispatch, id: string) {
121129
}
122130

123131
async function deleteBuild(dispatch: Dispatch, id: string) {
124-
dispatch({ type: "request" });
125-
126132
buildsService
127133
.remove(id)
128134
.then((isDeleted) => {

‎src/contexts/testRun.context.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ type State = {
6363
selectedTestRunId: string | undefined;
6464
selectedTestRunIndex: number | undefined;
6565
testRuns: TestRun[];
66+
loading: boolean;
6667
};
6768

6869
type TestRunProviderProps = { children: React.ReactNode };
@@ -76,6 +77,7 @@ const initialState: State = {
7677
selectedTestRunId: undefined,
7778
selectedTestRunIndex: undefined,
7879
testRuns: [],
80+
loading: false,
7981
};
8082

8183
function testRunReducer(state: State, action: IAction): State {
@@ -92,10 +94,16 @@ function testRunReducer(state: State, action: IAction): State {
9294
(t) => t.id === action.payload
9395
),
9496
};
97+
case "request":
98+
return {
99+
...state,
100+
loading: true,
101+
};
95102
case "get":
96103
return {
97104
...state,
98105
testRuns: action.payload,
106+
loading: false,
99107
};
100108
case "delete":
101109
return {
@@ -168,8 +176,6 @@ async function getTestRunList(dispatch: Dispatch, buildId: string) {
168176
}
169177

170178
async function deleteTestRun(dispatch: Dispatch, id: string) {
171-
dispatch({ type: "request" });
172-
173179
testRunService
174180
.remove(id)
175181
.then((isDeleted) => {

0 commit comments

Comments
 (0)