A Vue component that conditionally renders slots depending on the combination of "loading" and "failed" props.

Loading.vue

<template>
    <div>
        <slot
            v-if="showLoadingState"
            name="loading">
            <div>
                Loading...
            </div>
        </slot>

        <slot
            v-if="showFailedState"
            name="failed" />

        <slot
            v-if="hasLoaded"
            name="completed" />
    </div>
</template>

<script>
export default {
    name: 'Loading',

    props: {
        loading: {
            type: Boolean,
            required: true,
            default: false,
        },

        failed: {
            type: Boolean,
            required: false,
            default: false,
        },
    },

    computed: {
        showLoadingState () {
            // Ensure that the failed state takes precedence in case the parent incorrectly
            // sets loading and failed to true.
            if (this.loading === true && !this.failed) {
                return true;
            }

            return false;
        },

        showFailedState () {
            if (this.failed) {
                return true;
            }

            return false;
        },

        hasLoaded () {
            if (!this.loading && !this.failed) {
                return true;
            }

            return false;
        },
    },
};
</script>