Create app namespace for all absolute requires of app modules. Move all packages under packages yarn workspace

packages/app/components/ui/loader/ComponentLoader.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Skin } from 'app/components/ui';
+
+import styles from './componentLoader.scss';
+
+function ComponentLoader({ skin = 'dark' }: { skin?: Skin }) {
+  return (
+    <div
+      className={classNames(
+        styles.componentLoader,
+        styles[`${skin}ComponentLoader`],
+      )}
+    >
+      <div className={styles.spins}>
+        {new Array(5).fill(0).map((_, index) => (
+          <div
+            className={classNames(styles.spin, styles[`spin${index}`])}
+            key={index}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default ComponentLoader;

packages/app/components/ui/loader/ImageLoader.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import classNames from 'classnames';
+import { ComponentLoader } from 'app/components/ui/loader';
+import { SKIN_LIGHT } from 'app/components/ui';
+
+import styles from './imageLoader.scss';
+
+export default class ImageLoader extends React.Component<
+  {
+    src: string;
+    alt: string;
+    ratio: number; // width:height ratio
+    onLoad?: Function;
+  },
+  {
+    isLoading: boolean;
+  }
+> {
+  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 (
+      <div className={styles.container}>
+        <div
+          style={{
+            height: 0,
+            paddingBottom: `${ratio * 100}%`,
+          }}
+        />
+
+        {isLoading && (
+          <div className={styles.loader}>
+            <ComponentLoader skin={SKIN_LIGHT} />
+          </div>
+        )}
+
+        <div
+          className={classNames(styles.image, {
+            [styles.imageLoaded]: !isLoading,
+          })}
+        >
+          <img src={src} alt={alt} />
+        </div>
+      </div>
+    );
+  }
+}

packages/app/components/ui/loader/componentLoader.scss

@@ -0,0 +1,69 @@
+@import '~app/components/ui/colors.scss';
+
+.componentLoader {
+  width: 100%;
+  text-align: center;
+}
+
+.spins {
+  height: 40px;
+}
+
+.spin {
+  height: 20px;
+  width: 20px;
+  display: inline-block;
+  margin: 10px 2px;
+  opacity: 0;
+  animation: loaderAnimation 1s infinite;
+}
+
+.spin1 {
+  animation-delay: 0s;
+}
+
+.spin2 {
+  animation-delay: 0.1s;
+}
+
+.spin3 {
+  animation-delay: 0.2s;
+}
+
+.spin4 {
+  animation-delay: 0.3s;
+}
+
+.spin5 {
+  animation-delay: 0.4s;
+}
+
+/**
+ * Skins
+ */
+.lightComponentLoader {
+  .spin {
+    background: #aaa;
+  }
+}
+
+.darkComponentLoader {
+  .spin {
+    background: #444;
+  }
+}
+
+@keyframes loaderAnimation {
+  0% {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 1;
+    transform: scaleY(2);
+  }
+
+  100% {
+    opacity: 0;
+  }
+}

packages/app/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;
+}

packages/app/components/ui/loader/index.ts

@@ -0,0 +1,2 @@
+export { default as ImageLoader } from './ImageLoader';
+export { default as ComponentLoader } from './ComponentLoader';

packages/app/components/ui/loader/loader.html

@@ -0,0 +1,12 @@
+<div id="loader" class="loader-overlay is-first-launch">
+    <div class="loader">
+        <div class="loader__cube loader__cube--1"></div>
+        <div class="loader__cube loader__cube--2"></div>
+        <div class="loader__cube loader__cube--3"></div>
+        <div class="loader__cube loader__cube--4"></div>
+        <div class="loader__cube loader__cube--5"></div>
+        <div class="loader__cube loader__cube--6"></div>
+        <div class="loader__cube loader__cube--7"></div>
+        <div class="loader__cube loader__cube--8"></div>
+    </div>
+</div>

packages/app/components/ui/loader/loader.scss

@@ -0,0 +1,192 @@
+.loader-overlay {
+  background: rgba(255, 255, 255, 0.3);
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+
+  visibility: hidden;
+  opacity: 0;
+
+  transition: 0.4s ease;
+
+  &.is-first-launch {
+    // if loader is shown for the first time, we will
+    // remove opacity and hide the entire site contents
+    background: #f2efeb;
+  }
+
+  &.is-active {
+    opacity: 1;
+    visibility: visible;
+  }
+}
+
+.loader {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-top: -75px;
+  margin-left: -75px;
+  width: 153px;
+  height: 153px;
+
+  &__cube {
+    position: absolute;
+    margin: -1px;
+    padding: 0;
+    width: 50px;
+    height: 50px;
+    background: rgba(35, 35, 35, 0.6);
+    display: inline-block;
+    animation-iteration-count: infinite;
+    animation-duration: 0.5s;
+    animation-timing-function: linear;
+
+    &--1 {
+      margin: 0 0 0 0;
+      animation-name: cube1;
+    }
+
+    &--2 {
+      margin: 0 0 0 051px;
+      animation-name: cube2;
+    }
+
+    &--3 {
+      margin: 0 0 0 102px;
+      animation-name: cube3;
+    }
+
+    &--4 {
+      margin: 51px 0 0 0;
+      animation-name: cube4;
+    }
+
+    &--5 {
+      margin: 051px 0 0 051px;
+    }
+
+    &--6 {
+      margin: 51px 0 0 102px;
+      animation-name: cube6;
+    }
+
+    &--7 {
+      margin: 102px 0 0 0;
+      animation-name: cube7;
+    }
+
+    &--8 {
+      margin: 102px 0 0 051px;
+      animation-name: cube8;
+    }
+  }
+}
+
+@keyframes cube1 {
+  25% {
+    margin: 0 0 0 0;
+  }
+  50% {
+    margin: 0 0 0 51px;
+  }
+  75% {
+    margin: 0 0 0 51px;
+  }
+  100% {
+    margin: 0 0 0 51px;
+  }
+}
+
+@keyframes cube2 {
+  25% {
+    margin: 0 0 0 51px;
+  }
+  50% {
+    margin: 0 0 0 102px;
+  }
+  75% {
+    margin: 0 0 0 102px;
+  }
+  100% {
+    margin: 0 0 0 102px;
+  }
+}
+
+@keyframes cube3 {
+  25% {
+    margin: 51px 0 0 102px;
+  }
+  50% {
+    margin: 51px 0 0 102px;
+  }
+  75% {
+    margin: 51px 0 0 102px;
+  }
+  100% {
+    margin: 51px 0 0 102px;
+  }
+}
+
+@keyframes cube4 {
+  25% {
+    margin: 51px 0 0 0;
+  }
+  50% {
+    margin: 51px 0 0 0;
+  }
+  75% {
+    margin: 0 0 0 0;
+  }
+  100% {
+    margin: 0 0 0 0;
+  }
+}
+
+@keyframes cube6 {
+  25% {
+    margin: 102px 0 0 102px;
+  }
+  50% {
+    margin: 102px 0 0 102px;
+  }
+  75% {
+    margin: 102px 0 0 102px;
+  }
+  100% {
+    margin: 102px 0 0 51px;
+  }
+}
+
+@keyframes cube7 {
+  25% {
+    margin: 102px 0 0 0;
+  }
+  50% {
+    margin: 102px 0 0 0;
+  }
+  75% {
+    margin: 51px 0 0 0;
+  }
+  100% {
+    margin: 51px 0 0 0;
+  }
+}
+
+@keyframes cube8 {
+  25% {
+    margin: 102px 0 0 51px;
+  }
+  50% {
+    margin: 102px 0 0 51px;
+  }
+  75% {
+    margin: 102px 0 0 51px;
+  }
+  100% {
+    margin: 102px 0 0 0;
+  }
+}