KevinMidboe/seasoned
1
0
Fork 0
Code Issues 12 Pull Requests 1 Packages Projects Releases 1 Wiki Activity

Loading placeholder for person fields.

Browse Source
This commit is contained in:
Kevin
2022-03-06 12:05:25 +01:00
parent 80ce96d6b2
commit ca873f14c7
1 changed files with 27 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/Person.vue
View File

@@ -5,7 +5,10 @@
<h1 v-if="person"> <h1 v-if="person">
{{ person.title || person.name }} {{ person.title || person.name }}
</h1> </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']"> <span class="known-for" v-if="person && person['known_for_department']">
{{ {{
@@ -25,6 +28,14 @@
</figure> </figure>
</header> </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"> <div v-if="person">
<MovieDetail v-if="age" title="Age" :detail="age" /> <MovieDetail v-if="age" title="Age" :detail="age" />
@@ -261,6 +272,21 @@ header {
.person__poster { .person__poster {
display: block; 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 { > img {
border-radius: 10px; border-radius: 10px;