Skip to content

Commit b8a5a37

Browse files
committed
feat: loading-page for suspense
1 parent ee73374 commit b8a5a37

File tree

5 files changed

+55
-2
lines changed

5 files changed

+55
-2
lines changed
Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { Typography, Box, CircularProgress } from "@material-ui/core";
2+
3+
import useStyles from "./Loading.styles";
4+
5+
function Loading() {
6+
const classes = useStyles();
7+
8+
return (
9+
<div className={classes.root}>
10+
<CircularProgress color="secondary" />
11+
<Typography variant="h6" component="div" className={classes.loadingText}>
12+
Loading
13+
<span className="loadingDots"></span>
14+
</Typography>
15+
</div>
16+
);
17+
}
18+
19+
export default Loading;
Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
// Loading.styles.jsx
2+
import { makeStyles } from "@material-ui/core/styles";
3+
4+
const useStyles = makeStyles({
5+
root: {
6+
display: "flex",
7+
flexDirection: "column",
8+
justifyContent: "center",
9+
alignItems: "center",
10+
height: "100vh",
11+
},
12+
loadingText: {
13+
marginTop: "16px",
14+
position: "relative",
15+
"& .loadingDots::after": {
16+
content: '"."',
17+
position: "absolute",
18+
left: "100%",
19+
marginLeft: "4px",
20+
animation: "$loadingDots 1s infinite",
21+
},
22+
},
23+
"@keyframes loadingDots": {
24+
"0%": { content: '"."' },
25+
"25%": { content: '".."' },
26+
"50%": { content: '"..."' },
27+
"75%": { content: '"...."' },
28+
"100%": { content: '"."' },
29+
},
30+
});
31+
32+
export default useStyles;
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from "./Loading.jsx";

frontend/src/components/NetworkRules/NetworkRules.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import debounce from "lodash/debounce";
1717
import { useState } from "react";
1818
import API from "utils/API";
1919

20-
import { useTranslation, Trans } from "react-i18next";
20+
import { useTranslation } from "react-i18next";
2121

2222
function NetworkRules({ network, callback }) {
2323
const { t, i18n } = useTranslation();

frontend/src/index.jsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,11 @@ import ReactDOM from "react-dom";
66
import App from "./App";
77

88
import "./i18n";
9+
import Loading from "components/Loading";
910

1011
ReactDOM.render(
1112
<React.StrictMode>
12-
<Suspense fallback={<div>Loading...</div>}>
13+
<Suspense fallback={<Loading />}>
1314
<App />
1415
</Suspense>
1516
</React.StrictMode>,

0 commit comments

Comments
 (0)