Merge pull request #39 from ButterCMS/init_loader

Spinner loader added

src/App.vue

@@ -3,6 +3,7 @@ import NoApiKeyView from "@/views/NoApiKeyView.vue";
 import Layout from "@/containers/Layout.vue";
 import { useApiError, useMenuItems } from "@/utils/hooks";
 import ApiTokenNotFound from "@/components/ApiTokenNotFound.vue";
+import Spinner from "@/components/Spinner.vue";
 
 const apiKeyExists = !!import.meta.env.VITE_APP_BUTTER_CMS_API_KEY;
 
@@ -11,7 +12,8 @@ const { error } = useApiError();
 </script>
 
 <template>
-  <no-api-key-view v-if="!apiKeyExists" />
+  <spinner v-if="loading"/>
+  <no-api-key-view v-else-if="!apiKeyExists" />
   <api-token-not-found v-else-if="error" />
   <Layout :menu-items="items" v-else>
     <RouterView />

src/components/Spinner.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="preloader">
+    <div class="loader">
+      <div class="spinner">
+        <div class="spinner-container">
+          <div class="spinner-rotator">
+            <div class="spinner-left">
+              <div class="spinner-circle"></div>
+            </div>
+            <div class="spinner-right">
+              <div class="spinner-circle"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+</script>
+
+<style scoped>
+
+</style>

src/views/ArticleView.vue

@@ -1,4 +1,5 @@
 <template>
+  <spinner v-show="loading"/>
   <seo
     :title="article.title"
     :description="article.meta_description"
@@ -23,12 +24,15 @@ import BlogContentContainer from "../components/BlogSections/BlogContentContaine
 import SingleArticle from "../components/BlogSections/SingleArticle.vue";
 import { basicBlogLinks } from "@/utils";
 import Seo from "@/components/Seo.vue";
+import Spinner from "@/components/Spinner.vue";
 
 const article = ref({});
+const loading = ref(true)
 const route = useRoute();
 onMounted(async () => {
   const slug = route.params.article;
   const response = await butterCMS.post.retrieve(slug);
   article.value = response.data.data;
+  loading.value = false
 });
 </script>

src/views/BlogView.vue

@@ -1,4 +1,5 @@
 <template>
+  <spinner v-show="loading" />
   <div v-show="!loading">
     <seo
       :title="`Sample Blog - ${seoTitle}`"
@@ -21,6 +22,7 @@ import BlogPostsList from "../components/BlogSections/BlogPostsList.vue";
 import { ref, watch } from "vue";
 import { getBlogCategory, getBlogTag } from "@/utils/service";
 import Seo from "@/components/Seo.vue";
+import Spinner from "@/components/Spinner.vue";
 
 const { setError } = useApiError();
 const route = useRoute();

src/views/HomeView.vue

@@ -9,9 +9,11 @@ import BlogSection from "@/components/HomepageSections/BlogSection.vue";
 import { useApiError } from "@/utils/hooks";
 import Seo from "@/components/Seo.vue";
 import {useRoute} from "vue-router";
+import Spinner from "@/components/Spinner.vue";
 
 const { setError } = useApiError();
 const pageData = ref(null);
+const loading = ref(true)
 const blogPosts = ref([]);
 const route = useRoute()
 const {handleMounted} = inject("layout")
@@ -27,6 +29,7 @@ onMounted(async () => {
     const posts = await butterCMS?.post.list({ page: 1, page_size: 2 });
     blogPosts.value = posts?.data.data;
     await nextTick()
+    loading.value = false
     handleMounted()
   } catch (e) {
     setError(e);
@@ -35,6 +38,7 @@ onMounted(async () => {
 </script>
 
 <template>
+  <spinner v-if="loading"/>
   <div v-if="pageData">
     <seo v-bind="pageData.fields.seo" />
     <template v-for="(item, index) in pageData.fields.body">