loading icon

resources/js/components/SMHero.vue

@@ -1,26 +1,32 @@
 <template>
     <section class="hero">
-        <div class="hero-background" :style="heroStyles"></div>
+        <SMLoading v-if="!loaded" large />
-        <SMContainer class="align-items-start">
+        <template v-else>
-            <div class="hero-content">
+            <div class="hero-background" :style="heroStyles"></div>
-                <h1>{{ heroTitle }}</h1>
+            <SMContainer class="align-items-start">
-                <p>{{ heroExcerpt }}</p>
+                <div class="hero-content">
-                <div class="hero-buttons">
+                    <h1>{{ heroTitle }}</h1>
-                    <SMButton
+                    <p>{{ heroExcerpt }}</p>
-                        v-if="loaded"
+                    <div class="hero-buttons">
-                        type="primary"
+                        <SMButton
-                        :to="{ name: 'article', params: { slug: heroSlug } }"
+                            v-if="loaded"
-                        label="Read More" />
+                            type="primary"
+                            :to="{
+                                name: 'article',
+                                params: { slug: heroSlug },
+                            }"
+                            label="Read More" />
+                    </div>
                 </div>
+            </SMContainer>
+            <div class="hero-caption">
+                <router-link
+                    v-if="loaded"
+                    :to="{ name: 'article', params: { slug: heroSlug } }"
+                    >{{ heroImageTitle }}</router-link
+                >
             </div>
-        </SMContainer>
+        </template>
-        <div class="hero-caption">
-            <router-link
-                v-if="loaded"
-                :to="{ name: 'article', params: { slug: heroSlug } }"
-                >{{ heroImageTitle }}</router-link
-            >
-        </div>
     </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;