Jakob Wennberg
573feea890
* 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>
49 lines
1.7 KiB
TypeScript
49 lines
1.7 KiB
TypeScript
import { Skeleton } from '@/components/ui/skeleton'
|
|
|
|
/**
|
|
* 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" 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" />
|
|
</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>
|
|
)
|
|
}
|