yunohost-admin/app/src/components/globals/ViewBase.vue

<template>
  <div>
    <TopBar v-if="hasTopBar">
      <template #group-left>
        <slot name="top-bar-group-left" />
      </template>
      <template #group-right>
        <slot name="top-bar-group-right" />
      </template>
    </TopBar>
    <slot v-else name="top-bar" />

    <slot name="top" v-bind="{ loading: isLoading }" />

    <BSkeletonWrapper :loading="isLoading">
      <template #loading>
        <slot name="skeleton">
          <Component :is="skeleton" />
        </slot>
      </template>

      <!-- Empty div to be able to receive multiple components -->
      <div>
        <slot name="default" v-bind="{ loading: isLoading }" />
      </div>
    </BSkeletonWrapper>

    <slot name="bot" v-bind="{ loading: isLoading }" />
  </div>
</template>

<script>
import api from '@/api'

export default {
  compatConfig: { MODE: 3 },
  name: 'ViewBase',

  props: {
    queries: { type: Array, default: null },
    queriesWait: { type: Boolean, default: false },
    skeleton: { type: [String, Array], default: null },
    // Optional prop to take control of the loading value
    loading: { type: Boolean, default: null },
  },

  data() {
    return {
      fallback_loading:
        this.loading === null && this.queries !== null ? true : null,
    }
  },

  computed: {
    isLoading() {
      if (this.loading !== null) return this.loading
      return this.fallback_loading
    },

    hasTopBar() {
      return ['top-bar-group-left', 'top-bar-group-right'].some(
        (slotName) => slotName in this.$slots,
      )
    },
  },

  methods: {
    fetchQueries({ triggerLoading = false } = {}) {
      if (triggerLoading) {
        this.fallback_loading = true
      }

      api
        .fetchAll(this.queries, { wait: this.queriesWait, initial: true })
        .then((responses) => {
          this.$emit('queries-response', ...responses)
          this.fallback_loading = false
        })
    },
  },

  created() {
    if (this.queries) this.fetchQueries()
  },
}
</script>