Project

General

Profile

Edit Copy Actions
Copy link

Bug #11813

open

Optimise the checkout page in store front application

Added by Yalavarthi Thriveni 4 days ago. Updated 2 days ago.

Status:
Resolved
Priority:
Normal
Assignee:
Divya Inapakurthi
Target version:
sprint (10/12/2026 - 10/31/2026)
Start date:
10/30/2026
Due date:
10/30/2026 (3 days late)
% Done:

100%

Estimated time:
3:00 h
Spent time:
2:30 h
Tested Date:
10/29/2026
Raised by Tester:
Page/ Module (POS):
E commerce
Quote

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.

Add

Subtasks

Add

Related issues

Actions
Copy link
 #1

Updated by Divya Inapakurthi 3 days ago

  • Due date set to 10/30/2026
  • Status changed from New to In Progress
  • Start date changed from 10/29/2026 to 10/30/2026
Actions
Copy link
 #2

Updated by Divya Inapakurthi 2 days ago

  • Status changed from In Progress to Resolved
  • % Done changed from 0 to 100
Edit Copy Actions
Copy link

Also available in: Atom PDF