loading icon

resources/js/components/SMHero.vue

@@ -1,5 +1,7 @@
 <template>
     <section class="hero">
+        <SMLoading v-if="!loaded" large />
+        <template v-else>
             <div class="hero-background" :style="heroStyles"></div>
             <SMContainer class="align-items-start">
                 <div class="hero-content">
@@ -9,7 +11,10 @@
                         <SMButton
                             v-if="loaded"
                             type="primary"
-                        :to="{ name: 'article', params: { slug: heroSlug } }"
+                            :to="{
+                                name: 'article',
+                                params: { slug: heroSlug },
+                            }"
                             label="Read More" />
                     </div>
                 </div>
@@ -21,6 +26,7 @@
                     >{{ heroImageTitle }}</router-link
                 >
             </div>
+        </template>
     </section>
 </template>
 
@@ -31,6 +37,7 @@ import { PostCollection } from "../helpers/api.types";
 import { mediaGetVariantUrl } from "../helpers/media";
 import { excerpt } from "../helpers/string";
 import SMButton from "./SMButton.vue";
+import SMLoading from "./SMLoading.vue";
 
 const loaded = ref(false);
 let heroTitle = ref("");
@@ -101,6 +108,7 @@ handleLoad();
 
 <style lang="scss">
 .hero {
+    display: flex;
     position: relative;
     overflow: hidden;
     min-height: 700px;