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