Changed views data

components/calendar/Calendar.vue

@@ -2,7 +2,7 @@
 import { useCalendar } from '@/stores/CalendarStore'
 import { computed, type Component, type ComputedRef } from 'vue'
 
-import { PhCircleNotch, PhMagnifyingGlass } from '@phosphor-icons/vue'
+import { PhMagnifyingGlass } from '@phosphor-icons/vue'
 import MonthlyLayout from './state/monthly/Layout.vue'
 import CenturyLayout from './state/centennially/Layout.vue'
 import DecadeLayout from './state/decennially/Layout.vue'
@@ -88,6 +88,8 @@ watch(charPending, (newStatus) => {
   }
 })
 
+const progressPercent = computed(() => 100 / [charPending.value, calPending.value, categoryPending.value].filter(Boolean).length)
+
 const currentViewComponent: ComputedRef<Component> = computed<Component>(() => {
   switch (currentConfig.viewType) {
     case 'month':
@@ -124,8 +126,8 @@ onMounted(() => {
   <div class="h-full w-full relative">
     <TransitionGroup name="screen">
       <div v-if="calPending || charPending || categoryPending" class="h-full w-full grid place-items-center">
-        <div class="flex flex-col items-center">
-          <PhCircleNotch size="42" class="animate-spin" />
+        <div class="flex flex-col items-center w-1/2">
+          <UiProgress :model-value="progressPercent" />
           <p class="text-lg mt-2">Chargement en cours…</p>
         </div>
       </div>

components/calendar/input/EventCategories.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { cn } from '@/lib/utils'
 import type { Category } from '~/models/Category';
 
 import { PhCaretDown, PhCheck } from '@phosphor-icons/vue';
@@ -70,9 +69,6 @@ const filteredCategories = computed(() =>
               :key="category.id"
               :value="category"
               class="cursor-pointer flex justify-between items-center"
-              :class="cn({
-
-              })"
             >
               <span>
                 {{ category.name }}

components/global/Spacing.vue

@@ -1,5 +1,30 @@
+<script lang="ts" setup>
+import { cn } from '~/lib/utils';
+
+interface SpacingProps {
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xlg' | '2xl' | '3xl'
+}
+
+const props = defineProps<SpacingProps>()
+
+let spacingClass: string
+
+switch (props.size) {
+  case 'lg':
+    spacingClass = "space-y-4"
+    break;
+
+  case 'md':
+  default:
+    spacingClass = "space-y-2"
+    break;
+}
+</script>
+
 <template>
-  <div class="space-y-2">
+  <div
+    :class="cn(spacingClass)"
+  >
     <slot />
   </div>
 </template>

components/ui/progress/Progress.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  ProgressIndicator,
+  ProgressRoot,
+  type ProgressRootProps,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(
+  defineProps<ProgressRootProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    modelValue: 0,
+  },
+)
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ProgressRoot
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'relative h-2 w-full overflow-hidden rounded-full bg-secondary',
+        props.class,
+      )
+    "
+  >
+    <ProgressIndicator
+      class="h-full w-full flex-1 bg-primary transition-all"
+      :style="`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`"
+    />
+  </ProgressRoot>
+</template>

components/ui/progress/index.ts

@@ -0,0 +1 @@
+export { default as Progress } from './Progress.vue'