Lazy Loading Card Table

Date

2026-08-14

Goal

Optimize page load performance for raw materials, products, purchases, and cutting list pages by implementing lazy loading for child/variant data in card-based layouts.

Problem

Pages with 100+ records loaded all child data eagerly (variants, items, materials), causing slow initial page loads.

Solution Pattern

Backend: Remove eager-loaded relationships from paginated query
Backend: Add SQL subqueries for summary data (variants_count, total_qty, material_name, unit, materials_count, total_usage, product_name, cutting_result)
Backend: Add new controller method returning JSON for lazy load
Frontend: Use useCardTableExpand(false) for default collapsed state
Frontend: Fetch child data via fetch() on expand, store in Record<number, T[]> state
Frontend: Pass items + isLoading props to sub-row components

Files Modified

Cutting (this session)

app/Services/Admin/Manage/CuttingService.php - paginated() no longer eager loads cuttingResults, cuttingMaterials, cuttingMaterialCombinations; added getMaterials() and getCombinations() methods
app/Http/Controllers/Admin/Manage/CuttingController.php - added materials() method
routes/web.php - added GET cuttings/{cutting}/materials route
resources/js/pages/admin/manage/cutting/columns.tsx - Cutting type: materials_count, total_usage, product_name, cutting_result
resources/js/pages/admin/manage/cutting/cutting-card.tsx - uses summary data from props
resources/js/pages/admin/manage/cutting/cutting-sub-row.tsx - accepts materials, combinations, isLoading props
resources/js/pages/admin/manage/cutting/index.tsx - lazy loading with fetchMaterials()
resources/js/pages/admin/manage/cutting/show.tsx - passes full data to sub-row

Purchases (this session)

app/Services/Admin/Manage/PurchaseService.php - paginated() no longer eager loads purchaseItems; added getItems() method
app/Http/Controllers/Admin/Manage/PurchaseController.php - added items() method
routes/web.php - added GET purchases/{purchase}/items route
resources/js/pages/admin/manage/purchase/columns.tsx - Purchase type: variants_count, total_qty, material_name, unit
resources/js/pages/admin/manage/purchase/purchase-card.tsx - uses summary data from props
resources/js/pages/admin/manage/purchase/purchase-sub-row.tsx - accepts items & isLoading props
resources/js/pages/admin/manage/purchase/index.tsx - lazy loading with fetchItems()

Raw Materials & Products (previous sessions)

Same pattern applied to RawMaterialService, RawMaterialController, ProductService, ProductController
Frontend pages updated with lazy loading state

Routes Added

Route::get('purchases/{purchase}/items', [PurchaseController::class, 'items'])->name('purchases.items')->middleware('permission:purchases.view');
Route::get('cuttings/{cutting}/materials', [CuttingController::class, 'materials'])->name('cuttings.materials')->middleware('permission:cuttings.view');

Key Implementation Details

SQL subqueries avoid N+1 queries while keeping summary data in the paginated response
getItems() / getMaterials() / getCombinations() methods handle media URL resolution for photos
Frontend caches loaded items to avoid re-fetching on repeated expand/collapse
Loading state shown while items are being fetched
Show pages (e.g., show.tsx) pass full data directly to sub-row components

Verification

PHP syntax check: OK
TypeScript: Only pre-existing errors in use-*-draft.ts files (unrelated)
Route cache cleared

3.6 KiB Raw Blame History