feat: add loading view

Author: nxhawk

package.json

@@ -14,6 +14,7 @@
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
     "axios": "^1.7.2",
+    "pinia": "^2.1.7",
     "primeicons": "^7.0.0",
     "vue": "^3.4.21",
     "vue-router": "4",

src/App.vue

@@ -1,12 +1,17 @@
 <script setup>
   import 'primeicons/primeicons.css'
+  import { computed } from 'vue'
+  import { useLoadingStore } from "@/store/loading";
+  import Icon from "@/components/Icon.vue";
 
+  const loadingStore = useLoadingStore();
+  const isLoading = computed(() => loadingStore.isLoading);
 </script>
 
 <template>
+  <div v-if="isLoading" class="bg-white/80 fixed top-0 left-0 z-[1000] h-screen w-full flex justify-center items-center">
+    <Icon icon="pi-spin pi-spinner" className="text-3xl text-[#67c23a]"/>
+  </div>
   <router-view></router-view>
 </template>
 
-<style scoped>
-
-</style>

src/api/examsRepository.ts

@@ -0,0 +1,10 @@
+import AxiosClient from "./axios";
+
+const resource = "/category";
+
+export default {
+  get(classId: string) {
+    return AxiosClient.get(`${resource}/${classId}/exams`);
+  }
+}
+

src/main.ts

@@ -1,4 +1,5 @@
 import { createApp } from 'vue'
+import { createPinia } from 'pinia'
 import './style.css'
 import App from './App.vue'
 import router from './router'
@@ -7,6 +8,7 @@ import loading from "@/assets/avatarDefault.webp";
 
 const app = createApp(App)
 
+app.use(createPinia())
 app.use(router)
 app.use(VueLazyLoad, {
   loading,

src/store/.gitkeep

@@ -0,0 +1,28 @@
+import { defineStore } from 'pinia';
+
+interface LoadingState {
+  isLoading: boolean;
+};
+
+export const useLoadingStore = defineStore({
+  id: "loading",
+  
+  state: ():LoadingState => ({
+    isLoading: false,
+  }),
+
+  getters: {
+
+  },
+
+  actions: {
+    changeLoadingState(_isLoading: boolean) {
+      this.isLoading = _isLoading;
+      if (_isLoading) {
+        document.body.style.overflowY = "hidden";
+      } else {
+        document.body.style.overflowY = "scroll";
+      }
+    }
+  }
+});

src/store/loading.ts

@@ -8,20 +8,23 @@
       :url="`/danh-sach-bai-tap/${category.slug}`"
     />
   </div>
-  <div v-else>Loading...</div>
 
 </template>
 
 <script setup>
   import ListCard from"@/components/ListCard.vue";
   import { RepositoryFactory } from "@/api/RepositoryFactory";
   import { onMounted, reactive } from "vue";
+  import { useLoadingStore } from "@/store/loading";
 
+  const loadingStore = useLoadingStore();
   const homeData = reactive([]);
 
   onMounted(async ()=> {
     const HomeRepository = RepositoryFactory.get("home");
+    loadingStore.changeLoadingState(true);
     const { data } = await HomeRepository.get();
+    loadingStore.changeLoadingState(false);
     homeData.value = data;
   });
   

src/views/HomePage.vue

@@ -545,7 +545,7 @@
     "@vue/compiler-dom" "3.4.29"
     "@vue/shared" "3.4.29"
 
-"@vue/devtools-api@^6.5.1":
+"@vue/devtools-api@^6.5.0", "@vue/devtools-api@^6.5.1":
   version "6.6.3"
   resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.6.3.tgz#b23a588154cba8986bba82b6e1d0248bde3fd1a0"
   integrity sha512-0MiMsFma/HqA6g3KLKn+AGpL1kgKhFWszC9U29NfpWK5LE7bjeXxySWJrOJ77hBz+TBrBQ7o4QJqbPbqbs8rJw==
@@ -1575,6 +1575,14 @@ pify@^2.3.0:
   resolved "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz"
   integrity sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==
 
+pinia@^2.1.7:
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/pinia/-/pinia-2.1.7.tgz#4cf5420d9324ca00b7b4984d3fbf693222115bbc"
+  integrity sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==
+  dependencies:
+    "@vue/devtools-api" "^6.5.0"
+    vue-demi ">=0.14.5"
+
 pirates@^4.0.1:
   version "4.0.6"
   resolved "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz"
@@ -1958,6 +1966,11 @@ vscode-uri@^3.0.8:
   resolved "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.0.8.tgz"
   integrity sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==
 
+vue-demi@>=0.14.5:
+  version "0.14.8"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.8.tgz#00335e9317b45e4a68d3528aaf58e0cec3d5640a"
+  integrity sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==
+
 vue-demi@^0.12.5:
   version "0.12.5"
   resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.12.5.tgz#8eeed566a7d86eb090209a11723f887d28aeb2d1"