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