Screen MapMobile app
Shop & search
Mobile app: every screen, state and flow in Shop & search.
8 screens and overlays, 49 states, 1 flows. Frames show a real screenshot where one was captured and a wireframe card where the state needs data or conditions a device run cannot produce.
Flows
Browse to product
Tap a category card
Tap a product
Branches and edge cases
Successfrom step 1
Successfrom step 1
Successfrom step 1
Edgefrom step 1
Edgefrom step 1
Successfrom step 1
Emptyfrom step 1
Emptyfrom step 2
Edgefrom step 2
Flow diagram
Screens and states
Search
Screen
(public)/searchSearch
Global product search with recent searches, results, sort pills and recommendations
src/app/(public)/search.tsxEntry
- Home search pill
- Deep link
Exits
- Cancel → Home
- Result card → product page
- Recent or trending chip → fills field
- Recently viewed card → product page
States · 20
Edge
Typing state · Empty or debounced query shows recent searches, prompt and recently viewed; request skipped
src/app/(public)/search.tsx:77Loading
Recent searches spinner · Spinner while stored searches load
src/features/search/components/history/recent-searches.tsx:107Empty
Trending Searches fallback · No stored searches; trending placeholders shown with no clear link
src/features/search/components/history/recent-searches.tsx:15Edge
Search saved on submit only · Saved on keyboard submit or suggestion tap, never while typing
src/app/(public)/search.tsx:226Loading
Recommended block spinner · Spinner and Recommended For You header while loading
src/features/search/components/history/recently-viewed.tsx:117Edge
Recommended fallback · Nothing viewed; shows New Arrivals under Recommended For You
src/features/search/components/history/recently-viewed.tsx:40Empty
Recommended block hidden · Both recently viewed and recommended lists empty
src/features/search/components/history/recently-viewed.tsx:128Loading
First page skeleton · Two column skeleton while first results load
src/app/(public)/search.tsx:269Empty
No products found for query · Searched, not loading, zero results; shows recommendations below
src/features/search/components/states/no-results.tsx:55Success
Results with sort pills · Relevance, Newest, Price Low, Price High; 2 column grid, 50 per page
src/app/(public)/search.tsx:339Loading
Paging spinner · Footer spinner while loading more results
src/app/(public)/search.tsx:283Edge
Sold out hidden · Request sets availableOnly, so Shop and Search lists differ
src/app/(public)/search.tsx:83Gate
Signed out heart · Hearts open the sign-in sheet
src/shared/hooks/use-wishlist-set.ts:124Offline
No offline state · No dedicated offline handling
unverifiedEmpty
What are you looking for? · Empty query shows recent searches or trending and recently viewed.
src/app/(public)/search.tsx:253Loading
Results skeleton · First page loading with no products yet; two-column skeleton.
src/app/(public)/search.tsx:260Empty
No products found · Query returned nothing; Try a different search term plus recently viewed.
src/app/(public)/search.tsx:265Loading
Loading more footer · Spinner at the end of the list while the next page loads.
src/app/(public)/search.tsx:224Edge
Debounced search · 300 ms debounce, minimum 1 character.
src/app/(public)/search.tsx:56Offline
Skeleton forever offline · No error UI; an offline query keeps the skeleton and a thrown error hits the crash screen.
src/app/(public)/search.tsx:77Captured states
Shop
Screen
(app)/(tabs)/shopShop
All products grid with category chips, filter chips and a local search field
src/app/(app)/(tabs)/shop/index.tsxEntry
- Tab bar
- Home category card
- Wishlist empty CTA Start shopping
- Deep link
Exits
- Product card → product page
- Heart → wishlist toggle
- Category chip → refilter in place
- Filter chips → filter sheets
States · 14
Loading
Initial skeleton grid · Products query undefined with nothing on screen
src/features/product-list/hooks/use-product-list-state.ts:154Loading
Filtering overlay · Refiltering while products are already shown; spinner over 80% background
src/features/product-list/components/ui/filtering-overlay.tsx:17Empty
No products found · No results; "Try adjusting your filters or check back later", chips stay tappable
src/features/product-list/components/ui/no-results-state.tsx:29Loading
Loading more footer · Next page of 50 loading; footer reads "Loading more..."
src/features/product-list/components/ui/product-loading-footer.tsx:17Edge
Scroll to top button · Appears after 300 px of scroll
src/features/product-list/components/product-list-layout.tsx:87Loading
Category chip skeleton · Five skeleton tiles while collections undefined
src/features/product-list/components/composed/category-carousel.tsx:125Empty
Category row hidden · Zero collections
src/features/product-list/components/composed/category-carousel.tsx:143Edge
Sold out products listed · Grid does not filter availability; image greyed with Sold out overlay, badges hidden
src/shared/components/product/product-card/hero-image.tsx:102Error
Error state unreachable · Screen passes error null, so the Failed to load state never renders
src/app/(app)/(tabs)/shop/index.tsx:109Error
Render crash fallback · Thrown render error caught by ProductListErrorBoundary
src/shared/components/error/product-list-error-boundary.tsx:32Error
Category tab crash · TabErrorBoundary says "The Category tab" and shows raw error message
src/shared/components/error/tab-error-boundary.tsx:59Edge
Local search debounce · 300 ms debounce, separate from global search, saves no recent searches
src/features/product-list/hooks/use-product-list-state.ts:68Gate
Signed out heart · Heart opens the sign-in sheet
src/shared/hooks/use-wishlist-set.ts:124Offline
Offline skeleton stays · No dedicated offline state
unverifiedCaptured states
Product list
Screen
(app)/(tabs)/shop/product-list/[id]Product list
Category or banner filtered product list that keeps the tab bar
src/app/(app)/(tabs)/shop/product-list/[id].tsxEntry
- Home banner of type product list
- Empty bag Start shopping
- Deep link
Exits
- Cancel → Shop tab
- Product card → product page
- Filter chips → filter sheets
States · 4
Loading
Same loading and empty as Shop · Skeleton, filtering overlay, pagination and no results match the Shop tab
src/app/(app)/(tabs)/shop/product-list/[id].tsx:97Error
Render crash fallback · ProductListErrorBoundary wraps page; no TabErrorBoundary here
src/app/(app)/(tabs)/shop/product-list/[id].tsx:151Edge
Title stays after clearing filter · Category is only the initial filter; user can clear it, title stays
src/app/(app)/(tabs)/shop/product-list/[id].tsx:46Edge
All Products id · Id "all" is skipped as a filter and shows an unfiltered list
src/features/product-list/hooks/use-product-list-state.ts:127Captured states
Something went wrong
Wireframe
Something went wrong
Not reachable on a device: Needs a render error in Shop
Inline
ProductListErrorBoundarySomething went wrong
Fallback for product list render errors with retry and navigation
src/shared/components/error/product-list-error-boundary.tsxEntry
- Shop tab render error
- Product list render error
Exits
- Try Again → retry, up to 3 times
- Go Back → Shop tab
- Go to Home → Home
States · 2
Error
Retry limit · Try Again allowed up to 3 retries
src/shared/components/error/product-list-error-boundary.tsx:32Edge
Details block gating unverified · Dev style details with retry counter; not confirmed gated on __DEV__
src/shared/components/error/product-list-error-boundary.tsx:203Filter
Sheet
MainFilterSheetFilter
Filter hub with On Sale switch and rows for sort, category and price
src/features/product-list/components/filter-sheets/main-filter-sheet.tsxEntry
- Main filter button in chips row
Exits
- Row tap → sub sheet, hub reopens after
- Clear all → reset and close
- Done → apply and close
States · 3
Edge
Price row value · Reads RM min to RM max, or empty when unset
src/features/product-list/components/filter-sheets/main-filter-sheet.tsx:73Edge
Category falls back to All · Selected slug not found in collections
src/features/product-list/components/filter-sheets/main-filter-sheet.tsx:83Edge
Swipe discards draft · Sheets edit a draft and commit only on Done
src/features/product-list/components/filter-sheets/filter-bottom-sheet.tsx:33Sort by
Sheet
SortFilterSheetSort by
Radio list of five sort options with reset to default
src/features/product-list/components/filter-sheets/sort-filter-sheet.tsxEntry
- Sort chip
- Filter hub Sort by row
Exits
- Done → apply sort
- Swipe → discard
States · 1
Edge
Draft reseeded on open · Selection resets to the applied sort each time
src/features/product-list/components/filter-sheets/sort-filter-sheet.tsx:30Category
Sheet
EnhancedCategoryFilterSheetCategory
Radio list of All Categories plus every collection
src/features/product-list/components/filter-sheets/enhanced-category-filter-sheet.tsxEntry
- Category chip
- Filter hub Category row
Exits
- Done → apply category
- Swipe → discard
States · 2
Loading
Collections spinner · Spinner while collections load
src/features/product-list/components/filter-sheets/enhanced-category-filter-sheet.tsx:72Empty
No collections · No empty copy; only All Categories is listed
src/features/product-list/components/filter-sheets/enhanced-category-filter-sheet.tsx:78Price Range
Sheet
PriceFilterSheetPrice Range
Dual thumb slider between backend price bounds with RM readout
src/features/product-list/components/filter-sheets/price-filter-sheet.tsxEntry
- Price chip
- Filter hub Price row
Exits
- Done → apply range
- Swipe → discard
States · 3
Edge
Default bounds · Range 0 to 2000 when backend bounds are unknown
src/features/product-list/hooks/use-product-list-state.ts:247Edge
Bounds update after load · A loading gap does not reset the slider bounds
src/features/product-list/hooks/use-product-list-state.ts:228Edge
Bound stored only if changed · Apply keeps a bound only when it differs from the range end
src/features/product-list/components/filter-sheets/price-filter-sheet.tsx:223