Show bank bookings before supporting data loads

frontend/pages/banking/statements/[mode]/[[id]].vue

@@ -38,6 +38,7 @@ const accounts = ref([])
 const ownaccounts = ref([])
 
 const loading = ref(true)
+const loadingDocuments = ref(true)
 
 const rebuildDocumentLists = () => {
   const documents = createddocuments.value.filter(i => i.type === "invoices" || i.type === "advanceInvoices")
@@ -61,39 +62,56 @@ const rebuildDocumentLists = () => {
 
 const setup = async () => {
   loading.value = true
-  const [statement, documentItems, invoiceItems, accountItems, ownAccountItems, customerItems, vendorItems] = await Promise.all([
+  loadingDocuments.value = true
-    route.params.id
+
-        ? useEntities("bankstatements").selectSingle(route.params.id, "*, statementallocations(*, cd_id(*), ii_id(*))")
+  const supportingDataPromise = Promise.all([
-        : Promise.resolve(itemInfo.value),
     useEntities("createddocuments").select("*, statementallocations(*), customer(id,name)"),
     useEntities("incominginvoices").select("*, statementallocations(*), vendor(*)"),
-    useEntities("accounts").selectSpecial("*", "number", true),
     useEntities("ownaccounts").select(),
     useEntities("customers").select(),
     useEntities("vendors").select()
   ])
 
+  const [statement, accountItems] = await Promise.all([
+    route.params.id
+        ? useEntities("bankstatements").selectSingle(route.params.id, "*, statementallocations(*, cd_id(*), ii_id(*))")
+        : Promise.resolve(itemInfo.value),
+    useEntities("accounts").selectSpecial("*", "number", true)
+  ])
+
   itemInfo.value = statement
+  accounts.value = accountItems
   if (itemInfo.value) oldItemInfo.value = JSON.parse(JSON.stringify(itemInfo.value))
 
   manualAllocationSum.value = calculateOpenSum.value
   allocationDepreciationStartDate.value = dayjs(itemInfo.value?.date || new Date()).format("YYYY-MM-DD")
+  loading.value = false
 
-  createddocuments.value = documentItems
+  const suggestionsPromise = itemInfo.value?.id
-  incominginvoices.value = invoiceItems.filter(i => i.state === "Gebucht")
+      ? useFunctions().useBankingStatementSuggestions(itemInfo.value.id)
-  accounts.value = accountItems
+      : Promise.resolve({ suggestions: [] })
-  ownaccounts.value = ownAccountItems
-  customers.value = customerItems
-  vendors.value = vendorItems
-  rebuildDocumentLists()
 
-  if (itemInfo.value?.id) {
+  try {
-    statementSuggestions.value = await useFunctions().useBankingStatementSuggestions(itemInfo.value.id)
+    const [documentItems, invoiceItems, ownAccountItems, customerItems, vendorItems] = await supportingDataPromise
-  } else {
+
-    statementSuggestions.value = { suggestions: [] }
+    createddocuments.value = documentItems
+    incominginvoices.value = invoiceItems.filter(i => i.state === "Gebucht")
+    ownaccounts.value = ownAccountItems
+    customers.value = customerItems
+    vendors.value = vendorItems
+    rebuildDocumentLists()
+  } catch (error) {
+    console.error("Offene Belege konnten nicht geladen werden:", error)
+  } finally {
+    loadingDocuments.value = false
   }
 
-  loading.value = false
+  try {
+    statementSuggestions.value = await suggestionsPromise
+  } catch (error) {
+    console.error("Buchungsvorschläge konnten nicht geladen werden:", error)
+    statementSuggestions.value = { suggestions: [] }
+  }
 }
 
 const displayCurrency = (value, currency = "€") => {
@@ -819,6 +837,11 @@ setup()
 
           <div class="flex-1 overflow-y-auto p-4 space-y-6">
 
+            <div v-if="loadingDocuments" class="flex items-center justify-center gap-2 py-10 text-sm text-gray-500">
+              <UIcon name="i-heroicons-arrow-path" class="h-5 w-5 animate-spin"/>
+              Offene Belege werden geladen …
+            </div>
+
             <div v-if="Number(calculateOpenSum) !== 0 && (topEntitySuggestion || fallbackSuggestedDocuments.length > 0 || fallbackSuggestedIncomingInvoices.length > 0)" class="rounded-xl border border-primary-200 bg-primary-50/70 dark:bg-primary-900/10 dark:border-primary-800 p-4">
               <div class="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
                 <div v-if="topEntitySuggestion">
@@ -1035,7 +1058,7 @@ setup()
               </div>
             </div>
 
-            <div v-if="filteredDocuments.length === 0 && filteredIncomingInvoices.length === 0"
+            <div v-if="!loadingDocuments && filteredDocuments.length === 0 && filteredIncomingInvoices.length === 0"
                  class="text-center py-10 text-gray-400">
               <UIcon name="i-heroicons-magnifying-glass" class="w-8 h-8 mx-auto mb-2 opacity-50"/>
               <p>Keine passenden offenen Belege gefunden.</p>