Revamp app loaders

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 @@
+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%',
+  },
+};