Screen ID: CON-031
Flow: Home → Loading State
Previous: CON-030 Home Main
Next: CON-032 Delivery Slot Picker

Purpose: Demonstrates the skeleton/shimmer loading state for the home screen. This is shown while data is being fetched from the API after the app launches or when the user pulls to refresh.

Skeleton Pattern: Every content section from the populated home screen (CON-030) is represented by skeleton placeholders that match the approximate size and layout of the real content. The .skeleton class applies a shimmer animation (gradient sweep).

Header: The dark green header retains its background color but shows skeleton rectangles where the address text and notification icon would be. The search bar outline remains visible with a translucent skeleton fill.

Sections Represented: 1. Delivery slot banner (single rounded rectangle)
2. Promo banner (large rounded rectangle + dot indicators)
3. Categories (row of circle + text skeleton pairs)
4. Quick Shops (row of card-shaped rectangles)
5. On Special (2x2 grid of product card skeletons with image, brand, title, price, button areas)
6. Popular Right Now (horizontal scroll of narrower card skeletons)

No State Toggles: This screen IS the loading state and does not have its own state variations. It is referenced by the CON-030 home screen's loading state toggle.

Duration: Skeleton state should display for 1-3 seconds under normal network conditions. If loading exceeds 5 seconds, a retry prompt should appear (see error state in CON-030).

Bottom Navigation: The bottom nav is visible during loading but may not be interactive until data loads. Home tab is active.