Support #7571
openTest every transaction/ functional flow with UI elements & add the loaders to load properly backend data in all pages
100%
Subtasks
Related issues
Updated by Ajit A about 1 month ago
- Status changed from New to In Progress
- Estimated time set to 8:00 h
started
Updated by Ajit A about 1 month ago
- % Done changed from 0 to 80
Frontend Changes Summary
Implemented skeleton loading and React Query migration for products
Skeleton loading components:
Added ProductDetailsSkeleton for product detail pages
Added ProductsListingSkeleton for the products listing page
Replaced GlobalLoader with skeleton loaders
React Query migration:
Migrated product fetching from useEffect to useQuery hooks
Created useProductQuery for single product fetching
Updated useProductsQuery with caching and retry logic
Migrated FeaturedCollections and Products components to use React Query hooks
Performance:
Fixed duplicate API calls (products, categories, subcategories)
Updated caching: refetchOnMount: false, refetchOnWindowFocus: false
Increased cache times for categories/subcategories (30 minutes)
Pagination:
Created reusable Pagination component
Integrated pagination into products listing page
Added URL parameter synchronization for page state
UI/UX:
Updated filter sidebar styling to match gold/luxury theme
Improved sort dropdown UI with gold accent colors
Fixed breadcrumb navigation to use query parameters (/products?category=id instead of /products/category-name)
Reduced page title font size
Removed focus ring from sort dropdown
Bug fixes:
Fixed React hooks order violations
Fixed type errors and undefined property access
Fixed category breadcrumb navigation causing "Product Not Found" errors
Backend Changes Summary
No backend changes were made in this session.
All backend API endpoints were verified to exist and function correctly:
GET /products - Product listing with filters, sorting, and pagination
GET /products/:id - Single product details
GET /category - Categories listing
GET /subcategory - Subcategories listing
The backend APIs support all required functionality including pagination, filtering, and sorting as expected by the frontend implementation.