From ca873f14c7210885d48a181a2bb0f31d2d9cc8d4 Mon Sep 17 00:00:00 2001
From: Kevin Midboe <kevin.midboe@gmail.com>
Date: Sun, 6 Mar 2022 12:05:25 +0100
Subject: [PATCH] Loading placeholder for person fields.

---
 src/components/Person.vue | 28 +++++++++++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/components/Person.vue b/src/components/Person.vue
index f294562..15d2fad 100644
--- a/src/components/Person.vue
+++ b/src/components/Person.vue
@@ -5,7 +5,10 @@
         <h1 v-if="person">
           {{ person.title || person.name }}
         </h1>
-        <loading-placeholder v-else :count="1" />
+        <div v-else>
+          <loading-placeholder :count="1" />
+          <loading-placeholder :count="1" lineClass="short" :top="3.5" />
+        </div>
 
         <span class="known-for" v-if="person && person['known_for_department']">
           {{
@@ -25,6 +28,14 @@
       </figure>
     </header>
 
+    <div v-if="loading">
+      <loading-placeholder :count="6" />
+      <loading-placeholder lineClass="short" :top="3" />
+      <loading-placeholder :count="6" lineClass="fullwidth" />
+      <loading-placeholder lineClass="short" :top="4.5" />
+      <loading-placeholder />
+    </div>
+
     <div v-if="person">
       <MovieDetail v-if="age" title="Age" :detail="age" />
 
@@ -261,6 +272,21 @@ header {
 
 .person__poster {
   display: block;
+  border-radius: 10px;
+  background-color: grey;
+  animation: pulse 1s infinite ease-in-out;
+
+  @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);
+    }
+  }
 
   > img {
     border-radius: 10px;