feat: frontend - loader component

frontend/src/components/LoaderComponent.vue

@@ -0,0 +1,45 @@
+<template>
+    <div class="flex justify-center items-center h-screen">
+        <div class="flex space-x-2">
+            <div class="dot bg-blue-500"></div>
+            <div class="dot bg-blue-500"></div>
+            <div class="dot bg-blue-500"></div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'LoaderComponent'
+}
+</script>
+
+<style scoped>
+.dot {
+    height: 1.25rem;
+    /* 20px */
+    width: 1.25rem;
+    /* 20px */
+    border-radius: 50%;
+    animation: bounce 0.6s infinite ease-in-out;
+}
+
+.dot:nth-child(1) {
+    animation-delay: -0.2s;
+}
+
+.dot:nth-child(2) {
+    animation-delay: -0.1s;
+}
+
+@keyframes bounce {
+    0%,
+    100% {
+        transform: scale(0);
+    }
+
+    50% {
+        transform: scale(1);
+    }
+}
+</style>

frontend/src/pages/HomePage.vue

@@ -6,11 +6,15 @@
         Explore a vast collection of books, share your reviews, and connect with other book lovers.
       </p>
     </div>
+    <!-- <LoaderComponent /> -->
     <PaginationComponent :previousPage="previousPageUrl" :nextPage="nextPageUrl" :pageSize="pageSize"
       @fetch-page="changePage" />
     <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
       <BookCardComponent v-for="(book, index) in books" :key="index" :book="book" />
     </div>
+    <div v-if="isLoading">
+      <LoaderComponent />
+    </div>
     <PaginationComponent :previousPage="previousPageUrl" :nextPage="nextPageUrl" :pageSize="pageSize"
       @fetch-page="changePage" />
   </main>
@@ -20,12 +24,19 @@
 import { mapGetters, mapActions } from 'vuex'
 import BookCardComponent from '@/components/BookCardComponent.vue'
 import PaginationComponent from '@/components/PaginationComponent.vue'
+import LoaderComponent from '@/components/LoaderComponent.vue'
 
 export default {
   name: 'HomePage',
   components: {
     BookCardComponent,
-    PaginationComponent
+    PaginationComponent,
+    LoaderComponent
+  },
+  data () {
+    return {
+      isLoading: false
+    }
   },
   computed: {
     ...mapGetters(['allBooks', 'nextPageUrl', 'previousPageUrl', 'currentPageSize']),
@@ -61,7 +72,17 @@ export default {
   },
   methods: {
     ...mapActions(['fetchBooks']),
-
+    async fetchBooks (payload) {
+      this.isLoading = true
+      this.$store.commit('SET_BOOKS', [])
+      try {
+        await this.$store.dispatch('fetchBooks', payload)
+      } catch (error) {
+        console.error('Error fetching books:', error)
+      } finally {
+        this.isLoading = false
+      }
+    },
     changePage (page) {
       this.$router.push({ query: { page } })
     }