Performance Decorators

@Lazy(placeholder?)

Defers rendering until the component enters the viewport. A placeholder element is shown while the component is off-screen.

import { Lazy, Component } from '@praxisjs/decorators'

@Lazy(300)  // 300px placeholder height
@Component()
class HeavyChart extends StatefulComponent {
  render() {
    return <canvas id="chart" />
  }
}

The argument is the placeholder height in pixels. This prevents layout shift when the component renders.

Use cases: components below the fold, heavy visualizations, third-party widgets.

---

@Virtual(itemHeight, buffer?)

Virtualizes large lists — only items in the visible viewport (plus buffer items on each side) are rendered. Dramatically reduces DOM node count for long lists.

import { Virtual, Component, Prop } from '@praxisjs/decorators'

interface User {
  id: number
  name: string
  email: string
}

@Virtual(56, 3)  // 56px per item, 3 items buffer
@Component()
class UserList extends StatefulComponent {
  @Prop() items: User[] = []

  renderItem(item: User, index: number) {
    return (
      <div class="user-row" key={item.id}>
        <strong>{item.name}</strong>
        <span>{item.email}</span>
      </div>
    )
  }

  render() { return <div /> }
}

Argument	Type	Description
itemHeight	number	Fixed height of each item in pixels
buffer	number	Extra items to render above/below viewport (default: 5)

Requirements

• items prop must be an array
• renderItem(item, index) method must be defined
• Items must have a fixed, known height
• itemHeight must be a positive number — passing 0 or a negative value throws an error