xevion/the-office
1
0
Fork 0
mirror of https://github.com/Xevion/the-office.git synced 2025-12-06 01:16:34 -06:00
Code Issues Packages Projects Releases Wiki Activity

Fix Characters component skeleton loading animations to polished finish

Browse Source
This commit is contained in:
Xevion
2022-05-21 17:17:51 -05:00
parent 89d96c4cc9
commit fa4e1cccc2
1 changed files with 61 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
src/components/Characters.vue
View File

@@ -1,39 +1,62 @@
<template>
<div>
<b-breadcrumb v-if="ready" :items="breadcrumbs" />
<b-card v-else class="breadcrumb-skeleton mb-3">
<Skeleton style="width: 40%;" />
</b-card>
<b-card v-if="ready">
<b-list-group>
<b-list-group-item v-for="id in sorted_character_ids" :key="id">
<b-row align-v="start" align-content="start">
<b-col cols="5" md="4" lg="4" xl="3">
<b-img-lazy
fluid-grow class="px-2"
:src="faceURL(id)"
:blank-src="faceURL(id, true)"
blank-width="200" blank-height="200"
/>
</b-col>
<b-col>
<h4>
{{ characters[id].name || id }}
<router-link
class="no-link"
:to="{ name: 'Character', params: {character: id} }"
>
<b-icon class="h6" icon="caret-right-fill" />
</router-link>
</h4>
<p class="pl-3">
{{ characters[id].summary }}
</p>
</b-col>
</b-row>
</b-list-group-item>
</b-list-group>
</b-card>
<template v-if="ready">
<b-breadcrumb v-if="ready" :items="breadcrumbs" />
<b-card>
<b-list-group>
<b-list-group-item v-for="id in sorted_character_ids" :key="id">
<b-row align-v="start" align-content="start">
<b-col cols="5" md="4" lg="4" xl="3">
<b-img-lazy
fluid-grow class="px-2"
:src="faceURL(id)"
:blank-src="faceURL(id, true)"
blank-width="200" blank-height="200"
/>
</b-col>
<b-col>
<h4>
{{ characters[id].name || id }}
<router-link
class="no-link"
:to="{ name: 'Character', params: {character: id} }"
>
<b-icon class="h6" icon="caret-right-fill" />
</router-link>
</h4>
<p class="pl-3">
{{ characters[id].summary }}
</p>
</b-col>
</b-row>
</b-list-group-item>
</b-list-group>
</b-card>
</template>
<template v-else>
<b-card class="breadcrumb-skeleton mb-3">
<Skeleton class="inlined" style="width: 10%;" />
<Skeleton class="inlined" style="width: 30%;" />
</b-card>
<b-card>
<b-list-group>
<b-list-group-item v-for="i in 6" :key="i">
<b-row align-v="start" align-content="start">
<b-col cols="5" lg="4" xl="3">
<ImageSkeleton style="width: 200px; height: 200px" />
</b-col>
<b-col>
<Skeleton style="width: 40%; height: 2.7em;" />
<Skeleton style="width: 60%;" />
<Skeleton style="width: 25%;" />
<Skeleton style="width: 35%;" />
<Skeleton style="width: 60%;" />
</b-col>
</b-row>
</b-list-group-item>
</b-list-group>
</b-card>
</template>
</div>
</template>
@@ -56,14 +79,16 @@ h4 {
<script>
import {types} from "@/mutation_types";
import Skeleton from "@/components/Skeleton.vue";
import ImageSkeleton from "@/components/ImageSkeleton";
export default {
components: {
ImageSkeleton,
Skeleton
},
computed: {
ready() {
return this.$store.state.preloaded;
return this.$store.getters.checkPreloaded('characters');
},
sorted_character_ids() {
return this.$store.getters.getSortedCharacters();
@@ -82,7 +107,7 @@ export default {
await this.$store.dispatch(types.PRELOAD_CHARACTERS)
// Re-compute computed properties since Vuex won't do it
this.$forceUpdate();
// this.$forceUpdate();
},
methods: {
faceURL(character, thumbnail = false) {