:recycle: adjusting hero loading | always showing hero temporarily

vue-theme/src/components/card.vue

         .f-col.w-max
             router-link(:to="`/${type}/${content.slug}`")
                 h1.t-up.t-cntr.t-b {{ content.title }}
+            p(v-if="content.end") {{ content.start }} – {{ content.end }}
             p {{ content.excerpt }}
 </template>
 

vue-theme/src/components/hero.vue

 <template lang="pug">
-.hero.w-max.f-col(v-if="showHero")
-    //- .tint.z-top.w-max
+.hero.w-max.f-col(v-if="showHero && !loading")
     .tint.w-max
     .hero--video.w-max(v-if="heroType === 'video'")
         iframe(
     .hero--image(v-else)
         .hero--image--overlay.w-max.f-col
             div(v-html="heroText")
-    //- if not hero image then heading overlay to show only in main article
-
+.hero.w-max.f-col(v-else-if="loading" style="justify-content: center !important;")
+    .tint.w-max
+    p loading...
 </template>
 
 <script>
         ...mapState({
             showHero: state => state.hero.url,
             heroText: state => state.hero.text,
+            loading: state => state.loading,
             heroType: state => state.hero.type,
             showPlaybutton: state => state.hero.playbutton,
         }),
         min-height: 50vh
         .embedded
             min-height: 50vh
-    
 </style>

vue-theme/src/store/index.js

 // Current page state
 const state = {
     title: wp.site_name,
+    loading: true,
     hero: {
         url: null,
         type: null,
 
 const mutations = {
     SET_HERO(state, hero) {
-        if (!hero) return
+        if (!hero) {
+            state.loading = false
+            return
+        }
 
         if (hero.url) {
             state.hero.text = hero.text
             state.hero.text = ''
             state.hero.playbutton = false
         }
+        state.loading = false
     },
     CLEAR_HERO(state) {
+        state.loading = true
         state.hero = {
             url: null,
             type: null,