perf: cross-system snappiness batch (middleware, loading states, bundle) (#909)

* perf: cross-system snappiness batch (middleware, loading states, bundle)

Middleware: resolve the active company at most once per request and run
the user_preferences + first-membership queries in parallel, cutting 1-2
sequential DB round trips from every authenticated page load.

Loading states: add loading.tsx skeletons for the six highest-traffic
dashboard routes, render the real salary page header during load instead
of a full-page skeleton, replace the blank fallback={null} Suspense
flashes on customers/articles, and reshape the settings skeleton to
match the actual form layout.

Bundle: defer recharts chart components via next/dynamic on the KPI page
and report views, replace the import page's framer-motion marching-ants
border with a CSS keyframe, and enable optimizePackageImports for
recharts/date-fns/framer-motion.

Transactions: extract the potential-match lookups into a shared parallel
helper; a single-query PostgREST embed is blocked until the
potential_supplier_invoice_id FK exists in prod (see DECISIONS.md).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

* fix(transactions): log potential-match query failures instead of dropping them

A DB error in the invoice/supplier-invoice hint lookups previously
surfaced as "no potential match"; log it so failures are diagnosable.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>

components/reports/views/index.tsx

@@ -28,10 +28,24 @@ import { formatVoucher } from '@/lib/bookkeeping/voucher-series-resolver'
 import { AccountNumber } from '@/components/ui/account-number'
 import { ReportExportMenu } from '@/components/reports/ReportExportMenu'
 import { useCompanySettings } from '@/components/settings/useSettings'
-import { TrialBalanceChart } from '@/components/reports/TrialBalanceChart'
-import { VatCompositionChart } from '@/components/reports/VatCompositionChart'
+import dynamic from 'next/dynamic'
 import { SkatteverketPanel } from '@/components/reports/SkatteverketPanel'
-import { IncomeExpenseChart } from '@/components/reports/IncomeExpenseChart'
+
+// Recharts is ~180KB: defer the chart components so report tables (the
+// regulated content) render without waiting for the charting bundle.
+const chartFallback = () => <Skeleton className="h-64 w-full" />
+const TrialBalanceChart = dynamic(
+  () => import('@/components/reports/TrialBalanceChart').then((m) => m.TrialBalanceChart),
+  { ssr: false, loading: chartFallback },
+)
+const VatCompositionChart = dynamic(
+  () => import('@/components/reports/VatCompositionChart').then((m) => m.VatCompositionChart),
+  { ssr: false, loading: chartFallback },
+)
+const IncomeExpenseChart = dynamic(
+  () => import('@/components/reports/IncomeExpenseChart').then((m) => m.IncomeExpenseChart),
+  { ssr: false, loading: chartFallback },
+)
 import { useReportRowExpansion } from '@/components/reports/ReportRowExpansion'
 import type {
   ReportSourceLine,

components/settings/SettingsLoadingSkeleton.tsx

@@ -1,28 +1,48 @@
 import { Skeleton } from '@/components/ui/skeleton'
 
 /**
- * Placeholder shown while a settings section's data loads. Mirrors the real shape
- * of the section forms: an uppercase section heading followed by stacked
- * label/field rows, with a hairline divider between blocks: so the swap to live
+ * Placeholder shown while a settings section's data loads. Mirrors the real
+ * shape of the section forms (see CompanyInfoForm and SettingsFormWrapper):
+ * an uppercase section heading, a two-column grid of label/field pairs,
+ * full-width rows, and a right-aligned save button, so the swap to live
  * content doesn't jump from a mismatched layout.
  */
 export function SettingsLoadingSkeleton() {
   return (
-    <div className="space-y-8 animate-in fade-in duration-300" aria-busy="true">
-      {[0, 1].map((block) => (
-        <div
-          key={block}
-          className={block === 0 ? 'space-y-4' : 'space-y-4 border-t border-border pt-8'}
-        >
-          <Skeleton className="h-3.5 w-32" />
-          {[0, 1, 2].map((row) => (
-            <div key={row} className="space-y-2">
+    <div className="space-y-8" aria-busy="true">
+      <div className="space-y-4">
+        <Skeleton className="h-4 w-40" />
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+          {[0, 1].map((cell) => (
+            <div key={cell} className="space-y-2">
               <Skeleton className="h-3.5 w-24" />
-              <Skeleton className="h-10 w-full max-w-md" />
+              <Skeleton className="h-10 w-full" />
             </div>
           ))}
         </div>
-      ))}
+        <div className="space-y-2">
+          <Skeleton className="h-3.5 w-24" />
+          <Skeleton className="h-10 w-full" />
+        </div>
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+          {[0, 1].map((cell) => (
+            <div key={cell} className="space-y-2">
+              <Skeleton className="h-3.5 w-24" />
+              <Skeleton className="h-10 w-full" />
+            </div>
+          ))}
+        </div>
+        <div className="mt-8 flex justify-end">
+          <Skeleton className="h-10 w-24" />
+        </div>
+      </div>
+      <div className="space-y-4 border-t border-border pt-8">
+        <Skeleton className="h-4 w-32" />
+        <div className="space-y-2">
+          <Skeleton className="h-3.5 w-24" />
+          <Skeleton className="h-10 w-full" />
+        </div>
+      </div>
     </div>
   )
 }