diff options
author | 2018-12-08 17:09:12 +0100 | |
---|---|---|
committer | 2018-12-08 17:09:12 +0100 | |
commit | 7ab7605c220c665607844784ffbf21a030888f8e (patch) | |
tree | 5285647db76b4cc16444d2fb81b7fb0585367416 /src/components/ui/FullscreenLoader | |
parent | feat(Service): Add error screen for services that failed to load (diff) | |
download | ferdium-app-7ab7605c220c665607844784ffbf21a030888f8e.tar.gz ferdium-app-7ab7605c220c665607844784ffbf21a030888f8e.tar.zst ferdium-app-7ab7605c220c665607844784ffbf21a030888f8e.zip |
Revamp app loaders
Diffstat (limited to 'src/components/ui/FullscreenLoader')
-rw-r--r-- | src/components/ui/FullscreenLoader/index.js | 26 | ||||
-rw-r--r-- | src/components/ui/FullscreenLoader/styles.js | 23 |
2 files changed, 49 insertions, 0 deletions
diff --git a/src/components/ui/FullscreenLoader/index.js b/src/components/ui/FullscreenLoader/index.js new file mode 100644 index 000000000..bff5189c5 --- /dev/null +++ b/src/components/ui/FullscreenLoader/index.js | |||
@@ -0,0 +1,26 @@ | |||
1 | import React from 'react'; | ||
2 | import injectSheet from 'react-jss'; | ||
3 | import classnames from 'classnames'; | ||
4 | |||
5 | import Loader from '../Loader'; | ||
6 | |||
7 | import styles from './styles'; | ||
8 | |||
9 | export default injectSheet(styles)(({ classes, className, title, children }) => ( | ||
10 | <div className={classes.wrapper}> | ||
11 | <div | ||
12 | className={classnames({ | ||
13 | [`${classes.component}`]: true, | ||
14 | [`${className}`]: className, | ||
15 | })} | ||
16 | > | ||
17 | <h1 className={classes.title}>{title}</h1> | ||
18 | <Loader color="#FFF" /> | ||
19 | {children && ( | ||
20 | <div className={classes.content}> | ||
21 | {children} | ||
22 | </div> | ||
23 | )} | ||
24 | </div> | ||
25 | </div> | ||
26 | )); | ||
diff --git a/src/components/ui/FullscreenLoader/styles.js b/src/components/ui/FullscreenLoader/styles.js new file mode 100644 index 000000000..64d24e4ce --- /dev/null +++ b/src/components/ui/FullscreenLoader/styles.js | |||
@@ -0,0 +1,23 @@ | |||
1 | export default { | ||
2 | wrapper: { | ||
3 | display: 'flex', | ||
4 | alignItems: 'center', | ||
5 | position: 'absolute', | ||
6 | width: '100%', | ||
7 | }, | ||
8 | component: { | ||
9 | width: '100%', | ||
10 | display: 'flex', | ||
11 | flexDirection: 'column', | ||
12 | alignItems: 'center', | ||
13 | textAlign: 'center', | ||
14 | height: 'auto', | ||
15 | }, | ||
16 | title: { | ||
17 | fontSize: 35, | ||
18 | }, | ||
19 | content: { | ||
20 | marginTop: 20, | ||
21 | width: '100%', | ||
22 | }, | ||
23 | }; | ||