Improve department navigation: add loading state, skeleton loaders, and optimize department list rendering

src/views/dashboards/departmentDashboard/modules/daily-report/displays/DepartmentDashboardDailyReportNavigation.vue

@@ -4,6 +4,7 @@ import { selected_date, selected_date_to, selectDate, selected_department_ids, s
 import DatePeriodSelector from "@/components/displays/buttons/DatePeriodSelector.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
 import { getDepartmentName } from "@/components/session/token/SessionUser/Objects/Departments.vue";
+import {BButton, BSkeleton} from "buefy";
 
 /**
  * Props:
@@ -18,9 +19,10 @@ const props = defineProps({
 const accessibleDepartmentIds = ref([]);
 const departmentOptions = ref([]);
 const localSelectedIds = ref([]);
-
+const loadingDepartments = ref(false);
 const loadDepartments = async () => {
   // Get IDs user can access
+  loadingDepartments.value = true;
   accessibleDepartmentIds.value = SessionUser.functions.getAccessibleDepartments() || [];
   // Map to options with names
   const opts = [];
@@ -40,6 +42,7 @@ const loadDepartments = async () => {
     localSelectedIds.value = [...accessibleDepartmentIds.value];
     selectDepartments([...accessibleDepartmentIds.value]);
   }
+  loadingDepartments.value = false;
 };
 
 onMounted(async () => {
@@ -91,6 +94,7 @@ const toggleSelection = (id) => {
       <label class="label mb-2">Afdelinger</label>
       <div class="buttons" style="flex-wrap: wrap; gap: 0.5rem 0.5rem;">
         <button
+          v-show="!loadingDepartments"
           v-for="opt in departmentOptions"
           :key="opt.id"
           class="button"
@@ -101,6 +105,13 @@ const toggleSelection = (id) => {
         >
           {{ opt.name }}
         </button>
+        <!-- Loading skeleton -->
+        <template v-for="i in 9" :key="'loading-skeleton-' + i" v-if="loadingDepartments">
+          <b-button class="is-light">
+            <b-skeleton width="80px" height="1rem"/>
+          </b-button>
+        </template>
+
         <!-- All -->
       </div>
     </div>