<template  >
    <div :style="imgUrl">
    <v-sheet v-if="!loaded" class="text-center">
    <v-progress-circular
      indeterminate
      color="primary"
    ></v-progress-circular>
    </v-sheet>
    </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  data() { 
    return {
      loaded: false
    }
  },
  props: {
      news: {
          type: Object,
          required: true
      }
  },
  computed: {
    ...mapGetters({
      indexNewsList: "modules/news/indexNewsList",
    }),
    imgUrl() {
        return 'background-image: url(' + (this.news.image ? this.news.image.url : '') + ')'; 
    }
  },
  mounted() {
    this.loaded = true
  }
};
</script>

<style>
.text-center {
    position: absolute;
    height: 100%;
    width: 100%;
    align-items: center;
    display: flex;
    justify-content: center;
    z-index: 10;
}
</style>