To display loading progress, I've implemented a component with a slot and an enum prop like the following example:
<template>
<div class="loaded-listing">
<div class="loaded-listing__loading-placeholder" v-if="isLoading">
<some-third-party-indicator ... />
</div>
<slot v-else />
<!-- the Failed status is not displayed yet -->
</div>
</template>
<script lang="ts">
export enum loadStatusEnum {
Loading,
Loaded,
Failed
}
import { Component, Prop, Vue } from 'vue-property-decorator'
import { SomeThirdPartyIndicator } from 'some-third-party-indicator'
@Component({
props: ['loadStatus'],
components: { SomeThirdPartyIndicator },
})
export default class LoadedListing extends Vue {
@Prop() readonly loadStatus!: loadStatusEnum;
get isLoading (): boolean {
return this.loadStatus == loadStatusEnum.Loading
}
}
</script>
When integrating loading in a view or a component, I utilize it as follows:
import LoadedListing, { loadStatusEnum } from '../components/LoadedListing.vue'
export default class SomePage extends Vue {
...
someStuffLoadStatus: loadStatusEnum = loadStatusEnum.Loading; // 1
loadSomeStuff (): void {
this.someStuffLoadStatus = loadStatusEnum.Loading; // 2
this.$store.dispatch('someModule/loadSomeStuff', ...) // some model updating in a callback
.then(() => this.someStuffLoadStatus = loadStatusEnum.Loaded) // 3
.catch(() => this.someStuffLoadStatus = loadStatusEnum.Failed) // 4
}
...
}
and in template:
<LoadedListing class="some-stuff-list" :load-status="someStuffLoadStatus">
<div class="some-stuff-list__top-panel"> ... </div>
<VueSimplebar class="some-stuff-list__body" ...> ... </VueSimplebar>
</LoadedListing>
One downside of this method includes:
- I have to repeat lines 1-4 for every loader
- I need to create the
someStuffLoadStatusproperty in the parent component and pass it as a prop, even though it's solely related to the component's loading status
It might be more suitable to directly integrate the loader into a specific component instance (using ref perhaps?), but the implementation process is unclear. Can you suggest an alternative approach for such integration?