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

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;
+  }
+}