1 files changed, 70 insertions, 0 deletions

diff --git a/src/components/ui/AppLoader/index.js b/src/components/ui/AppLoader/index.js
new file mode 100644
index 000000000..61053f6d1
--- /dev/null
+++ b/src/components/ui/AppLoader/index.js
@@ -0,0 +1,70 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import injectSheet, { withTheme } from 'react-jss';
+import classnames from 'classnames';
+
+import FullscreenLoader from '../FullscreenLoader';
+import { shuffleArray } from '../../../helpers/array-helpers';
+
+import styles from './styles';
+
+const textList = shuffleArray([
+  'Looking for Sisi',
+  'Contacting the herald',
+  'Saddling the unicorn',
+  'Learning the Waltz',
+  'Visiting Horst & Grete',
+  'Twisting my moustache',
+  'Playing the trumpet',
+  'Traveling through space & time',
+]);
+
+export default @injectSheet(styles) @withTheme class AppLoader extends Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    theme: PropTypes.object.isRequired,
+  }
+
+  state = {
+    step: 0,
+  }
+
+  interval = null;
+
+  componentDidMount() {
+    this.interval = setInterval(() => {
+      this.setState(prevState => ({
+        step: prevState.step === textList.length - 1 ? 0 : prevState.step + 1,
+      }));
+    }, 2500);
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.interval);
+  }
+
+  render() {
+    const { classes, theme } = this.props;
+    const { step } = this.state;
+
+    return (
+      <FullscreenLoader
+        title="Franz"
+        className={classes.component}
+        spinnerColor={theme.colorAppLoaderSpinner}
+      >
+        {textList.map((text, i) => (
+          <span
+            key={text}
+            className={classnames({
+              [`${classes.slogan}`]: true,
+              [`${classes.visible}`]: step === i,
+            })}
+          >
+            {text}
+          </span>
+        ))}
+      </FullscreenLoader>
+    );
+  }
+}