Created elements for ui elements, loading-placeholder for all keyframing and styling for the pulsing placeholder text and a main.scss for global classes such as noselect which prevents hightlighting of text

src/scss/elements.scss

@@ -0,0 +1,41 @@
+.filter {
+  // margin: 10px 10px 20px;
+  margin: 1rem;
+  padding: 0;
+  overflow: auto;
+  list-style: none;
+  border: 1px solid;
+  border-radius: 2px;
+  // overflow: hidden;
+  display: flex;
+  transition: color .2s ease;
+  // justify-content: space-evenly;
+
+  &-item {
+    padding: 6px 15px;
+    background-color: $c-white;
+    transition: color 0.2s ease;
+    font-size: 13px;
+    font-weight: 200;
+    text-transform: capitalize;
+    text-align: center;
+    width: 100%;
+    white-space:nowrap;
+    // overflow: hidden;
+    &:nth-child(n+2) {
+      border-left: solid 1px;
+    }
+    &.active, &:hover {
+      border-color: transparent;
+      background-color: #091c24;
+      color: $c-green;
+      cursor: pointer;
+    }
+    @include tablet-min {
+      font-size: 16px;
+    }
+  }
+}
+
+// TODO 
+//  - add buttons

src/scss/loading-placeholder.scss

@@ -0,0 +1,72 @@
+@import "./src/scss/variables";
+
+.movie__actions-link {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  text-transform: uppercase;
+  color: rgba($c-dark, 0.5);
+  transition: color 0.5s ease;
+  font-size: 11px;
+  padding: 10px 0;
+  border-bottom: 1px solid rgba($c-dark, 0.05);
+  &:hover{
+    color: rgba($c-dark, 0.75);
+  }
+  &.active{
+    color: $c-dark;
+  }
+  &.pending{
+    color: #f8bd2d;
+  }
+}
+.movie__actions-text {
+  margin:4.4px;
+  margin-left: -3px;
+}
+
+// Loading placeholder styling
+@mixin nth-children($points...) {
+  @each $point in $points {
+    &:nth-child(#{$point}) {
+      @content;
+    }
+  }
+}
+
+.text-input__loading {
+  width: 100%;
+
+   &--line {
+    height: 10px;
+    margin: 10px;
+    animation: pulse 1s infinite ease-in-out;
+  }
+
+  div {
+    @include nth-children(1, 5, 9) {
+      width: 150px;
+    }
+    @include nth-children(2, 6, 10) {
+      width: 250px;
+    }
+    @include nth-children(3, 7) {
+      width: 120px;
+    }
+    @include nth-children(4, 8) {
+      width: 100px;
+    }
+  }
+
+  @keyframes pulse {
+    0% {
+      background-color: rgba(165, 165, 165, 0.1);
+    }
+    50% {
+      background-color: rgba(165, 165, 165, 0.3);
+    }
+    100% {
+      background-color: rgba(165, 165, 165, 0.1);
+    }
+  }
+}

src/scss/main.scss

@@ -0,0 +1,24 @@
+
+.noselect {
+  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none;   /* Safari */
+  -khtml-user-select: none;    /* Konqueror HTML */
+  -moz-user-select: none;      /* Firefox */
+  -ms-user-select: none;       /* Internet Explorer/Edge */
+  user-select: none;           /* Non-prefixed version, currently */
+}
+
+.end-section {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  margin: 1rem 0;
+}
+
+.button--group {
+  display: flex;
+
+  > div:not(:first-child) {
+    margin-left: 1rem;
+  }
+}