diff --git a/src/components/Projects.vue b/src/components/Projects.vue
index fe4bc51..ed2668b 100644
--- a/src/components/Projects.vue
+++ b/src/components/Projects.vue
@@ -10,6 +10,7 @@
     tabindex="0"
     :aria-label="tabs[0].label"
     class="flow"
+    :class="{ loading: isProjectsLoading }"
   >
     <Project
       v-for="project in currentProjects"
@@ -24,7 +25,7 @@
     tabindex="0"
     :aria-label="tabs[1].label"
     class="flow"
-  > 
+  >
     <Project
       v-for="project in archivedProjects"
       :key="project.id"
@@ -33,30 +34,29 @@
   </section>
 </template>
 <script setup>
-import Tabs from "./Tabs.vue";
-import Project from "./project/Project.vue";
-import { useProjectsStore } from "../stores/projects";
-import { ref, computed } from "vue";
-import { storeToRefs } from "pinia";
+import Tabs from './Tabs.vue';
+import Project from './project/Project.vue';
+import { useProjectsStore } from '../stores/projects';
+import { ref, computed } from 'vue';
+import { storeToRefs } from 'pinia';
 
-const { projects, currentProjects, archivedProjects } = storeToRefs(
-  useProjectsStore()
-);
+const { projects, currentProjects, archivedProjects, isProjectsLoading } =
+  storeToRefs(useProjectsStore());
 
-const currentTab = ref("currentProjects");
+const currentTab = ref('currentProjects');
 const tabs = computed(() => {
   return [
     {
-      label: "Projets en cours",
-      id: "currentProjects",
+      label: 'Projets en cours',
+      id: 'currentProjects',
       count: currentProjects.value.length,
-      isActive: currentTab.value === "currentProjects",
+      isActive: currentTab.value === 'currentProjects',
     },
     {
-      label: "Projets archivés",
-      id: "archivedProjects",
+      label: 'Projets archivés',
+      id: 'archivedProjects',
       count: archivedProjects.value.length,
-      isActive: currentTab.value === "archivedProjects",
+      isActive: currentTab.value === 'archivedProjects',
     },
   ];
 });
@@ -72,7 +72,7 @@ section {
   min-height: calc(100vh - 8.5rem);
 }
 section:empty::after {
-  content: "Aucun projet pour le moment.";
+  content: 'Aucun projet pour le moment.';
   position: absolute;
   inset: 0;
   display: grid;
diff --git a/src/stores/projects.js b/src/stores/projects.js
index b1861b7..0ff35b3 100644
--- a/src/stores/projects.js
+++ b/src/stores/projects.js
@@ -1,24 +1,26 @@
-import { defineStore } from "pinia";
-import { useApiStore } from "./api.js";
-import { ref, computed } from "vue";
+import { defineStore } from 'pinia';
+import { useApiStore } from './api.js';
+import { ref, computed } from 'vue';
 
-export const useProjectsStore = defineStore("projects", () => {
+export const useProjectsStore = defineStore('projects', () => {
+  const isProjectsLoading = ref(true);
   const projects = ref([]);
 
   const currentProjects = computed(() => {
-    return projects.value.filter((project) => project.status === "listed");
+    return projects.value.filter((project) => project.status === 'listed');
   });
   const draftProjects = computed(() => {
-    return projects.value.filter((project) => project.status === "draft");
+    return projects.value.filter((project) => project.status === 'draft');
   });
   const archivedProjects = computed(() => {
-    return projects.value.filter((project) => project.status === "unlisted");
+    return projects.value.filter((project) => project.status === 'unlisted');
   });
 
   const api = useApiStore();
-  api
-    .fetchData("projects")
-    .then((json) => (projects.value = json.page.children));
+  api.fetchData('projects').then((json) => {
+    isProjectsLoading.value = false;
+    projects.value = json.page.children;
+  });
 
   // Functions
   function getProjectByUuid(uuid) {
@@ -32,5 +34,6 @@ export const useProjectsStore = defineStore("projects", () => {
     archivedProjects,
     draftProjects,
     getProjectByUuid,
+    isProjectsLoading,
   };
 });