model.Zone.tsx

Zone components are 'Business Components' that bridge the gap between Pages and UI Units. They handle data fetching, state management, and business logic for a specific section of the UI.
🏗️Page Composition
A Page should ideally be composed of just Layout and Zone components. Detailed UI rendering is delegated to Units or Views.

File Convention

Zone files are located in the library directory of their respective Model. The filename must follow the PascalCase convention.
lib/[model]/[Model].Zone.tsx

Standard Structure

Zone components typically use `Load.View` or `Load.Units` to handle asynchronous data loading. They interact with the Store for global state and Service for actions.
Props
className?: string

Allows parent components to style the zone.

init?: ClientInit<Model, M>

Initial data for List/Units loading.

view?: ClientView<Model, M>

Initial data for View/Single loading.

Example Code: List Zone
Product.Zone.tsx (List)
Example Code: View Zone
Product.Zone.tsx (View)

Zone Best Practices

1️⃣Keep Pages Thin
Move data loading and logic from Page files to Zone files. Pages should primarily focus on Layout composition and routing parameters.
2️⃣Handle Loading & Empty States
Use `Load.Units` or `Load.View` to gracefully handle loading and empty states within the Zone, providing a better user experience.
3️⃣Encapsulate Business Logic
Place interaction handlers (e.g., button clicks triggering Service actions) inside the Zone, keeping Unit/View components purely presentational.
Released under the MIT License
Official Akan.js Consulting onAkansoft
Copyright © 2025 Akan.js. All rights reserved.
System managed bybassman