Bug #11813
openOptimise the checkout page in store front application
Status:
Resolved
Priority:
Normal
Assignee:
Target version:
Start date:
10/30/2026
Due date:
10/30/2026 (3 days late)
% Done:
100%
Estimated time:
3:00 h
Spent time:
Tested Date:
10/29/2026
Raised by Tester:
Page/ Module (POS):
E commerce
Description
1. Checkout.tsx (Split the 4,634-Line Monolith)
The Problem Today: All 4,634 lines live in one gigantic file. When the customer types a single letter in the "Apartment Number" field, React recalculates the entire page, re-evaluating loyalty points, coupons, confetti animations, and split shipping. This causes keyboard lag and frame drops.
The Solution: Divide the page into 5 isolated child components wrapped in React.memo:
<ContactSection />
<ShippingAddressSection />
<DeliveryOptionSelector />
<PaymentSection />
<OrderReviewSummary />
Result: Typing in an address field only re-renders the address box, keeping the rest of the application completely stable and responsive.
Subtasks
Related issues