feat(ui): finalize shared shells and loading states

web/src/views/scripts/BudgetCenterView.js

@@ -3,6 +3,7 @@ import { ElButton, ElInput, ElPagination, ElTable, ElTableColumn } from 'element
 
 import BudgetTrendChart from '../../components/charts/BudgetTrendChart.vue'
 import EnterpriseSelect from '../../components/shared/EnterpriseSelect.vue'
+import TableLoadingState from '../../components/shared/TableLoadingState.vue'
 import { fetchBudgetSummary } from '../../services/budgets.js'
 import { fetchEmployeeMeta } from '../../services/employees.js'
 import {
@@ -217,6 +218,7 @@ export default {
   components: {
     BudgetTrendChart,
     EnterpriseSelect,
+    TableLoadingState,
     ElButton,
     ElInput,
     ElPagination,
@@ -238,7 +240,7 @@ export default {
     const budgetTableKeyword = ref('')
     const budgetRows = ref([])
     const budgetSummary = ref(null)
-    const budgetLoading = ref(false)
+    const budgetLoading = ref(true)
     const budgetError = ref('')
     const canEditBudget = computed(() => canEditBudgetCenter(props.currentUser))
     const canSwitchDepartments = computed(() => canSwitchBudgetDepartments(props.currentUser))
@@ -424,6 +426,7 @@ export default {
     }
 
     async function loadDepartments() {
+      budgetLoading.value = true
       try {
         const payload = await fetchEmployeeMeta()
         const options = Array.isArray(payload?.organizationOptions) ? payload.organizationOptions : []