Revamp app loaders

7 files changed, 147 insertions, 15 deletions

diff --git a/src/components/ui/AppLoader.js b/src/components/ui/AppLoader.js
deleted file mode 100644
index ac3cdcb05..000000000
--- a/src/components/ui/AppLoader.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-
-import Appear from '../../components/ui/effects/Appear';
-import Loader from '../../components/ui/Loader';
-
-export default function () {
-  return (
-    <div className="app-loader">
-      <Appear>
-        <h1 className="app-loader__title">Franz</h1>
-        <Loader color="#FFF" />
-      </Appear>
-    </div>
-  );
-}
diff --git a/src/components/ui/AppLoader/index.js b/src/components/ui/AppLoader/index.js
new file mode 100644
index 000000000..61f97d4f9
--- /dev/null
+++ b/src/components/ui/AppLoader/index.js
@@ -0,0 +1,69 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import injectSheet 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) class AppLoader extends Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+  }
+
+  state = {
+    step: 0,
+  }
+
+  componentDidMount() {
+    this.interval = setInterval(() => {
+      this.setState({
+        step: this.state.step === textList.length - 1 ? 0 : this.state.step + 1,
+      });
+    }, 2500);
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.interval);
+  }
+
+  interval = null;
+
+  render() {
+    const { classes } = this.props;
+    const { step } = this.state;
+
+    return (
+      <FullscreenLoader
+        title="Franz"
+        className={classes.component}
+      >
+        {textList.map((text, i) => (
+          <span
+            key={i}
+            className={classnames({
+              [`${classes.slogan}`]: true,
+              [`${classes.visible}`]: step === i,
+            })}
+          >
+            {text}
+          </span>
+        ))}
+      </FullscreenLoader>
+    );
+  }
+}
+
diff --git a/src/components/ui/AppLoader/styles.js b/src/components/ui/AppLoader/styles.js
new file mode 100644
index 000000000..755a56b40
--- /dev/null
+++ b/src/components/ui/AppLoader/styles.js
@@ -0,0 +1,16 @@
+export default {
+  component: {
+    color: '#FFF',
+  },
+  slogan: {
+    display: 'block',
+    opacity: 0,
+    transition: 'opacity 1s ease',
+    position: 'absolute',
+    textAlign: 'center',
+    width: '100%',
+  },
+  visible: {
+    opacity: 1,
+  },
+};
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 @@
+import React from 'react';
+import injectSheet from 'react-jss';
+import classnames from 'classnames';
+
+import Loader from '../Loader';
+
+import styles from './styles';
+
+export default injectSheet(styles)(({ classes, className, title, children }) => (
+  <div className={classes.wrapper}>
+    <div
+      className={classnames({
+        [`${classes.component}`]: true,
+        [`${className}`]: className,
+      })}
+    >
+      <h1 className={classes.title}>{title}</h1>
+      <Loader color="#FFF" />
+      {children && (
+        <div className={classes.content}>
+          {children}
+        </div>
+      )}
+    </div>
+  </div>
+));
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 @@
+export default {
+  wrapper: {
+    display: 'flex',
+    alignItems: 'center',
+    position: 'absolute',
+    width: '100%',
+  },
+  component: {
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    textAlign: 'center',
+    height: 'auto',
+  },
+  title: {
+    fontSize: 35,
+  },
+  content: {
+    marginTop: 20,
+    width: '100%',
+  },
+};
diff --git a/src/components/ui/WebviewLoader/index.js b/src/components/ui/WebviewLoader/index.js
new file mode 100644
index 000000000..eff4dc3d7
--- /dev/null
+++ b/src/components/ui/WebviewLoader/index.js
@@ -0,0 +1,9 @@
+import React from 'react';
+
+import FullscreenLoader from '../FullscreenLoader';
+
+export default ({ name }) => (
+  <FullscreenLoader
+    title={`Loading ${name}`}
+  />
+);
diff --git a/src/helpers/array-helpers.js b/src/helpers/array-helpers.js
new file mode 100644
index 000000000..ffb3b63dc
--- /dev/null
+++ b/src/helpers/array-helpers.js
@@ -0,0 +1,4 @@
+export const shuffleArray = arr => arr
+  .map(a => [Math.random(), a])
+  .sort((a, b) => a[0] - b[0])
+  .map(a => a[1]);