mirror of
https://github.com/dec0dOS/zero-ui.git
synced 2024-09-20 06:56:05 +08:00
feat: loading-page for suspense
This commit is contained in:
parent
ee73374c29
commit
b8a5a37fc7
19
frontend/src/components/Loading/Loading.jsx
Normal file
19
frontend/src/components/Loading/Loading.jsx
Normal file
|
@ -0,0 +1,19 @@
|
||||||
|
import { Typography, Box, CircularProgress } from "@material-ui/core";
|
||||||
|
|
||||||
|
import useStyles from "./Loading.styles";
|
||||||
|
|
||||||
|
function Loading() {
|
||||||
|
const classes = useStyles();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={classes.root}>
|
||||||
|
<CircularProgress color="secondary" />
|
||||||
|
<Typography variant="h6" component="div" className={classes.loadingText}>
|
||||||
|
Loading
|
||||||
|
<span className="loadingDots"></span>
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Loading;
|
32
frontend/src/components/Loading/Loading.styles.jsx
Normal file
32
frontend/src/components/Loading/Loading.styles.jsx
Normal file
|
@ -0,0 +1,32 @@
|
||||||
|
// Loading.styles.jsx
|
||||||
|
import { makeStyles } from "@material-ui/core/styles";
|
||||||
|
|
||||||
|
const useStyles = makeStyles({
|
||||||
|
root: {
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
justifyContent: "center",
|
||||||
|
alignItems: "center",
|
||||||
|
height: "100vh",
|
||||||
|
},
|
||||||
|
loadingText: {
|
||||||
|
marginTop: "16px",
|
||||||
|
position: "relative",
|
||||||
|
"& .loadingDots::after": {
|
||||||
|
content: '"."',
|
||||||
|
position: "absolute",
|
||||||
|
left: "100%",
|
||||||
|
marginLeft: "4px",
|
||||||
|
animation: "$loadingDots 1s infinite",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
"@keyframes loadingDots": {
|
||||||
|
"0%": { content: '"."' },
|
||||||
|
"25%": { content: '".."' },
|
||||||
|
"50%": { content: '"..."' },
|
||||||
|
"75%": { content: '"...."' },
|
||||||
|
"100%": { content: '"."' },
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export default useStyles;
|
1
frontend/src/components/Loading/index.jsx
Normal file
1
frontend/src/components/Loading/index.jsx
Normal file
|
@ -0,0 +1 @@
|
||||||
|
export { default } from "./Loading.jsx";
|
|
@ -17,7 +17,7 @@ import debounce from "lodash/debounce";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import API from "utils/API";
|
import API from "utils/API";
|
||||||
|
|
||||||
import { useTranslation, Trans } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
|
|
||||||
function NetworkRules({ network, callback }) {
|
function NetworkRules({ network, callback }) {
|
||||||
const { t, i18n } = useTranslation();
|
const { t, i18n } = useTranslation();
|
||||||
|
|
|
@ -6,10 +6,11 @@ import ReactDOM from "react-dom";
|
||||||
import App from "./App";
|
import App from "./App";
|
||||||
|
|
||||||
import "./i18n";
|
import "./i18n";
|
||||||
|
import Loading from "components/Loading";
|
||||||
|
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
<React.StrictMode>
|
<React.StrictMode>
|
||||||
<Suspense fallback={<div>Loading...</div>}>
|
<Suspense fallback={<Loading />}>
|
||||||
<App />
|
<App />
|
||||||
</Suspense>
|
</Suspense>
|
||||||
</React.StrictMode>,
|
</React.StrictMode>,
|
||||||
|
|
Loading…
Reference in a new issue