aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/ui/AppLoader/index.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/ui/AppLoader/index.tsx')
-rw-r--r--src/components/ui/AppLoader/index.tsx68
1 files changed, 36 insertions, 32 deletions
diff --git a/src/components/ui/AppLoader/index.tsx b/src/components/ui/AppLoader/index.tsx
index caa7e381d..f4d9b8e73 100644
--- a/src/components/ui/AppLoader/index.tsx
+++ b/src/components/ui/AppLoader/index.tsx
@@ -1,7 +1,7 @@
1import { Component } from 'react'; 1import { Component, ReactElement } from 'react';
2import classnames from 'classnames'; 2import classnames from 'classnames';
3 3import withStyles, { WithStylesProps } from 'react-jss';
4import injectStyle from 'react-jss'; 4import { Theme } from '../../../themes';
5import FullscreenLoader from '../FullscreenLoader'; 5import FullscreenLoader from '../FullscreenLoader';
6import shuffleArray from '../../../helpers/array-helpers'; 6import shuffleArray from '../../../helpers/array-helpers';
7 7
@@ -18,24 +18,27 @@ const textList = shuffleArray([
18 'Fixing bugs', 18 'Fixing bugs',
19]); 19]);
20 20
21type Props = { 21interface IProps extends WithStylesProps<typeof styles> {
22 classes: typeof styles; 22 theme: Theme;
23 theme: any; 23 texts?: string[];
24 texts: string[]; 24}
25};
26
27class AppLoader extends Component<Props> {
28 static defaultProps = {
29 texts: textList,
30 };
31 25
32 state = { 26interface IState {
33 step: 0, 27 step: number;
34 }; 28}
35 29
30class AppLoader extends Component<IProps, IState> {
36 interval: NodeJS.Timeout | null = null; 31 interval: NodeJS.Timeout | null = null;
37 32
38 componentDidMount() { 33 constructor(props: IProps) {
34 super(props);
35
36 this.state = {
37 step: 0,
38 };
39 }
40
41 componentDidMount(): void {
39 this.interval = setInterval(() => { 42 this.interval = setInterval(() => {
40 this.setState((prevState: { step: number }) => ({ 43 this.setState((prevState: { step: number }) => ({
41 step: prevState.step === textList.length - 1 ? 0 : prevState.step + 1, 44 step: prevState.step === textList.length - 1 ? 0 : prevState.step + 1,
@@ -43,14 +46,14 @@ class AppLoader extends Component<Props> {
43 }, 2500); 46 }, 2500);
44 } 47 }
45 48
46 componentWillUnmount() { 49 componentWillUnmount(): void {
47 if (this.interval) { 50 if (this.interval) {
48 clearInterval(this.interval); 51 clearInterval(this.interval);
49 } 52 }
50 } 53 }
51 54
52 render() { 55 render(): ReactElement {
53 const { classes, theme, texts } = this.props; 56 const { classes, theme, texts = textList } = this.props;
54 const { step } = this.state; 57 const { step } = this.state;
55 58
56 return ( 59 return (
@@ -58,20 +61,21 @@ class AppLoader extends Component<Props> {
58 className={classes.component} 61 className={classes.component}
59 spinnerColor={theme.colorAppLoaderSpinner} 62 spinnerColor={theme.colorAppLoaderSpinner}
60 > 63 >
61 {texts.map((text, i) => ( 64 {texts &&
62 <span 65 texts.map((text, i) => (
63 key={text} 66 <span
64 className={classnames({ 67 key={text}
65 [`${classes.slogan}`]: true, 68 className={classnames({
66 [`${classes.visible}`]: step === i, 69 [`${classes.slogan}`]: true,
67 })} 70 [`${classes.visible}`]: step === i,
68 > 71 })}
69 {text} 72 >
70 </span> 73 {text}
71 ))} 74 </span>
75 ))}
72 </FullscreenLoader> 76 </FullscreenLoader>
73 ); 77 );
74 } 78 }
75} 79}
76 80
77export default injectStyle(styles, { injectTheme: true })(AppLoader); 81export default withStyles(styles, { injectTheme: true })(AppLoader);