MS-245/Optimize product listing performance with new ProductCardDTO and server-side filtering
Summary
This MR introduces a major performance optimization for product listing pages by eliminating N+1 queries and moving filtering logic to the server.
Changes
New Types
-
ProductCardDTO: Optimized DTO with flattened category data and preOrderAuthorization -
ProductCardSearchParams: Parameters for the new search endpoint -
FilterCountsDTO: Dynamic counts for filters (in stock, on sale) -
ProductCardPageResponse: Paginated response with filter counts
API Changes
- Added
searchProductCards()function calling/api/stock/products/cards/search - Updated
getProductByCategory()to returnPage<ProductCardDTO> - Updated
getRelatedProducts()to returnProductCardDTO[]
Component Updates
- ProductCard: Removed API call, uses props directly for availability
- ProductListed: Updated props to include preOrderAuthorization
- ProductsView: Added skeleton loaders, uses ProductCardDTO
- ProductFilterCard: Added keyword search with debounce, filter counts display, reset button
- ProductSearchByCategory/PageView: Unified implementation with new API
- ProductSearchByNamePageView: Unified implementation with new API
- RelatedProducts: Updated to use ProductCardDTO
- ProductGridList: Updated to use ProductCardDTO
- ProductSection: Updated to use ProductCardDTO
Performance Improvements
- Eliminated N+1 query problem (was: 1 + N API calls, now: 1 API call)
- Server-side filtering reduces client-side processing
- Debounced inputs prevent excessive API calls
UX Improvements
- Skeleton loaders during loading state
- Dynamic filter counts show available options
- Unified availability display across grid and list views
Breaking Changes
-
ProductCardprops changed: now requirespreOrderAuthorizationinstead of fetching internally - Components using
CustomProductRequestfor listings should migrate toProductCardDTO
Testing
-
Verify product listing pages load correctly -
Test all filter combinations (price, on sale, in stock, keyword) -
Verify pagination works correctly -
Test grid/list view toggle -
Verify availability badge shows correctly
Backend Requirements
- New endpoint:
GET /api/stock/products/cards/searchwith query parameters - Endpoint should return
ProductCardPageResponsewith filter counts
Related Issues
Closes MS-245