FastLoad

FastLoad is ZhinNX's optional progressive rendering system. It renders critical content first, delays heavier sections, optimizes media, and keeps the page usable while the rest of the UI is prepared.

FastLoad is useful for long landing pages, dashboards, catalogs, music home screens, and pages with heavy images or data.

Basic usage

import { chunk, fastPage } from './zhinnx/core.js'

fastPage('/', {
  strategy: 'adaptive',
  background: false,
  media: 'auto',
  buffer: 360,
  shell: () => `
    <main>
      <section id="hero"></section>
      <section id="products"></section>
      <section id="deals"></section>
    </main>
  `,
  chunks: [
    chunk('#hero', Hero, { critical: true, media: 'eager' }),
    chunk('#products', {
      skeleton: ProductSkeleton,
      data: () => api.get('/products.json'),
      render: products => ProductGrid(products),
      media: 'lazy'
    })
  ]
})

Avoid full render for small updates

A normal set() or update() triggers a route render by default. On a FastLoad page, that can rebuild the shell and render chunks again. For small UI changes such as cart count, liked status, badges, or toggles, use render: false and patch only the affected DOM.

update('shop.cart', cart => {
  const next = Array.isArray(cart) ? [...cart] : []
  next.push({ id: 'bag-01', qty: 1 })
  save('cart', next)
  return next
}, { render: false })

patch('.cart-count', get('shop.cart', []).length)

patch()

patch(selector, html) replaces the inner HTML of matching elements and re-binds ZhinNX actions inside that element.

patch('.cart-pill', CartPill())

The html value can also be a function.

patch('.cart-pill', ({ state }) => CartPill(state.shop.cart))

refresh()

refresh(selector, html) works like patch() when HTML is provided. Without HTML, it re-binds actions inside the selected area.

refresh('.product-grid')

Debug warning

When debug mode is active, ZhinNX warns if a state update triggers a full render while FastLoad is active. This usually means the update should use { render: false } with patch() or refresh().

zz dev --debug

Check active FastLoad

if (isFastPageActive()) {
  patch('.cart-count', cart.length)
}

When not to use FastLoad

Do not use FastLoad for tiny pages, simple login screens, or pages where all content must appear at once. FastLoad improves perceived loading; it does not magically reduce every file unless combined with lazy data, lazy media, and dynamic imports.