File tree Expand file tree Collapse file tree 5 files changed +55
-2
lines changed Expand file tree Collapse file tree 5 files changed +55
-2
lines changed Original file line number Diff line number Diff line change
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 ;
Original file line number Diff line number Diff line change
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 ;
Original file line number Diff line number Diff line change
1
+ export { default } from "./Loading.jsx" ;
Original file line number Diff line number Diff line change @@ -17,7 +17,7 @@ import debounce from "lodash/debounce";
17
17
import { useState } from "react" ;
18
18
import API from "utils/API" ;
19
19
20
- import { useTranslation , Trans } from "react-i18next" ;
20
+ import { useTranslation } from "react-i18next" ;
21
21
22
22
function NetworkRules ( { network, callback } ) {
23
23
const { t, i18n } = useTranslation ( ) ;
Original file line number Diff line number Diff line change @@ -6,10 +6,11 @@ import ReactDOM from "react-dom";
6
6
import App from "./App" ;
7
7
8
8
import "./i18n" ;
9
+ import Loading from "components/Loading" ;
9
10
10
11
ReactDOM . render (
11
12
< React . StrictMode >
12
- < Suspense fallback = { < div > Loading... </ div > } >
13
+ < Suspense fallback = { < Loading / >} >
13
14
< App />
14
15
</ Suspense >
15
16
</ React . StrictMode > ,
You can’t perform that action at this time.
0 commit comments