mirror of
https://github.com/dec0dOS/zero-ui.git
synced 2024-09-20 06:56:05 +08:00
Merge pull request #187 from aruznieto/loading-page
feat: loading-page for suspense
This commit is contained in:
commit
fa1a687147
|
@ -1,5 +1,6 @@
|
|||
import "@fontsource/roboto";
|
||||
|
||||
import { Suspense } from "react";
|
||||
import { BrowserRouter, Route, Redirect, Switch } from "react-router-dom";
|
||||
|
||||
import Theme from "./components/Theme";
|
||||
|
@ -10,9 +11,14 @@ import NotFound from "./routes/NotFound";
|
|||
import Network from "./routes/Network/Network";
|
||||
import Settings from "./routes/Settings";
|
||||
|
||||
import Loading from "./components/Loading";
|
||||
|
||||
import "./i18n";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<Theme>
|
||||
<Suspense fallback={<Loading />}>
|
||||
<BrowserRouter basename="/app">
|
||||
<Bar />
|
||||
<Switch>
|
||||
|
@ -23,6 +29,7 @@ function App() {
|
|||
<Redirect to="/404" />
|
||||
</Switch>
|
||||
</BrowserRouter>
|
||||
</Suspense>
|
||||
</Theme>
|
||||
);
|
||||
}
|
||||
|
|
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="primary" />
|
||||
<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 API from "utils/API";
|
||||
|
||||
import { useTranslation, Trans } from "react-i18next";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
function NetworkRules({ network, callback }) {
|
||||
const { t, i18n } = useTranslation();
|
||||
|
|
|
@ -1,17 +1,13 @@
|
|||
import "./index.css";
|
||||
|
||||
import React, { Suspense } from "react";
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
|
||||
import App from "./App";
|
||||
|
||||
import "./i18n";
|
||||
|
||||
ReactDOM.render(
|
||||
<React.StrictMode>
|
||||
<Suspense fallback={<div>Loading...</div>}>
|
||||
<App />
|
||||
</Suspense>
|
||||
</React.StrictMode>,
|
||||
document.getElementById("root")
|
||||
);
|
||||
|
|
Loading…
Reference in a new issue