loader added

terrerox · Dec 24, 2022 · 7db4a80 · 7db4a80 · vercel · Dec 24, 2022
1 parent 04802d6
commit 7db4a80
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 3 deletions.
diff --git a/src/assets/logo.jpg → public/logo.jpg b/src/assets/logo.jpg → public/logo.jpg
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/assets/loader.gif b/src/assets/loader.gif
diff --git a/src/store/posts.js b/src/store/posts.js
@@ -11,6 +11,7 @@ export const usePostStore = defineStore('posts', {
   }),
   actions: {
     getAll() {
+        this.isLoading = true
         return fetch(`https://graph.facebook.com/v14.0/17841413817530260?fields=media%7Btimestamp%2C%20caption%2C%20id%2C%20%20thumbnail_url%7D&access_token=${import.meta.env.VITE_INSTAGRAM_ACCESS_TOKEN}`)
         .then(res => {
             return res.json();
@@ -35,6 +36,7 @@ export const usePostStore = defineStore('posts', {
           })
     },
     getOne(id) {
+        this.isLoading = true
         return fetch(`https://graph.facebook.com/v14.0/${id}?fields=caption%2Cthumbnail_url%2Ctimestamp&access_token=${import.meta.env.VITE_INSTAGRAM_ACCESS_TOKEN}`)
         .then(res => {
             return res.json();

diff --git a/src/style.css b/src/style.css
@@ -331,6 +331,12 @@ a:focus {
   margin-bottom: var(--spacing-8);
 }
 
+.loader {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 /* Media queries */
 
 @media (max-width: 42rem) {

diff --git a/src/views/BlogPost.vue b/src/views/BlogPost.vue
@@ -22,11 +22,14 @@ watchEffect(
 </script>
 <template>
     <Layout :title="siteTitle" :location="location">
+        <div v-if="postStore.isLoading" class="loader">
+            <img src="../assets/loader.gif"/>
+        </div>
         <article
             class="blog-post"
             itemScope
             itemType="http://schema.org/Article"
-            v-if="!postStore.isLoading"
+            v-else
         >
             <header>
                 <h1 itemProp="headline">{{postStore.post.title}}</h1>

diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -22,7 +22,10 @@ onMounted(() => {
 <template>
     <Layout :title="siteTitle" :location="location">
       <Station />
-      <ol style="listStyle: none">
+      <div v-if="postStore.isLoading" class="loader" style="margin-top: 5%;">
+            <img src="../assets/loader.gif"/>
+      </div>
+      <ol style="listStyle: none" v-else>
         <Post 
           v-for="post in postStore.posts"
           :key="post.slug"