@@ -20,11 +19,6 @@ export default function ComponentLoader(props) {
);
}
-
-ComponentLoader.propTypes = {
- skin: PropTypes.oneOf(skins),
-};
-
ComponentLoader.defaultProps = {
- skin: SKIN_DARK
+ skin: 'dark'
};
diff --git a/src/components/ui/loader/ImageLoader.js b/src/components/ui/loader/ImageLoader.js
new file mode 100644
index 0000000..e156090
--- /dev/null
+++ b/src/components/ui/loader/ImageLoader.js
@@ -0,0 +1,64 @@
+// @flow
+import React from 'react';
+import classNames from 'classnames';
+import { ComponentLoader } from 'components/ui/loader';
+
+import styles from './imageLoader.scss';
+
+export default class ImageLoader extends React.Component<{
+ src: string,
+ alt: string,
+ ratio: number, // width:height ratio
+ onLoad?: Function,
+}, {
+ isLoading: bool
+}> {
+ state = {
+ isLoading: true
+ };
+
+ componentWillMount() {
+ this.preloadImage();
+ }
+
+ preloadImage() {
+ const img = new Image();
+ img.onload = () => this.imageLoaded();
+ img.onerror = () => this.preloadImage();
+ img.src = this.props.src;
+ }
+
+ imageLoaded() {
+ this.setState({ isLoading: false });
+
+ if (this.props.onLoad) {
+ this.props.onLoad();
+ }
+ }
+
+ render() {
+ const { isLoading } = this.state;
+ const { src, alt, ratio } = this.props;
+
+ return (
+
+
+
+ {isLoading && (
+
+
+
+ )}
+
+
+
+
+
+ );
+ }
+}
diff --git a/src/components/ui/loader/imageLoader.scss b/src/components/ui/loader/imageLoader.scss
new file mode 100644
index 0000000..76d55ed
--- /dev/null
+++ b/src/components/ui/loader/imageLoader.scss
@@ -0,0 +1,25 @@
+.container {
+ position: relative;
+ z-index: 1;
+}
+
+.loader {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
+
+.image {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+
+ opacity: 0;
+ transition: 0.4s ease-in;
+}
+
+.imageLoaded {
+ opacity: 1;
+}
diff --git a/src/components/ui/loader/index.js b/src/components/ui/loader/index.js
index c1db8c6..18d2bb2 100644
--- a/src/components/ui/loader/index.js
+++ b/src/components/ui/loader/index.js
@@ -1,5 +1,4 @@
-import ComponentLoader from './ComponentLoader';
+// @flow
-export {
- ComponentLoader
-};
+export {default as ImageLoader} from './ImageLoader';
+export {default as ComponentLoader} from './ComponentLoader';