From 691d0d25abf022d8a9d66c747a87a4165fe45274 Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Sun, 2 Jun 2019 15:28:52 +0200
Subject: [PATCH] These are blank flashing lines shown while the content is
 being fetched. Current prop is number of lines to render

---
 src/components/ui/LoadingPlaceholder.vue | 99 ++++++++++++++++++++++++
 1 file changed, 99 insertions(+)
 create mode 100644 src/components/ui/LoadingPlaceholder.vue

diff --git a/src/components/ui/LoadingPlaceholder.vue b/src/components/ui/LoadingPlaceholder.vue
new file mode 100644
index 0000000..14e3ed5
--- /dev/null
+++ b/src/components/ui/LoadingPlaceholder.vue
@@ -0,0 +1,99 @@
+<template>
+  <div>
+    <div class="text-input__loading">
+      <div class="text-input__loading--line" :class="lineClass" v-for="_ in Array(count)"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    count: {
+      type: Number,
+      require: true
+    },
+    lineClass: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+// Custom external context styling
+@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);
+    }
+  }
+}
+
+</style>
\ No newline at end of file