# Lazy Load
<div id="demo-content" class="not-prose demo-container flex justify-center min-h-[218px]"></div>
## Basic usage
On the client, put a placeholder where the content will go.
```html
<div hx-get="/weather" hx-trigger="load">
Loading...
</div>
```
- [`hx-get`](https://four.htmx.org/reference/attributes/hx-get)=`/weather` might query a database or call an external API.
- [`hx-trigger`](https://four.htmx.org/reference/attributes/hx-trigger)=[`"load"`](https://four.htmx.org/reference/attributes/hx-trigger#load) fires the request as soon as the element enters the DOM.
On the server, respond with the HTML content. htmx swaps it into the placeholder when it arrives.
```html
<div class="forecast">
<h3>5-Day Forecast</h3>
<p>Monday: 72° Sunny</p>
<p>Tuesday: 68° Cloudy</p>
</div>
```
## Multiple sections
Each placeholder loads independently. Your page renders fast even if several sections are slow:
```html
<div hx-get="/dashboard/sales" hx-trigger="load">
Loading sales...
</div>
<div hx-get="/dashboard/analytics" hx-trigger="load">
Loading analytics...
</div>
<div hx-get="/dashboard/notifications" hx-trigger="load">
Loading notifications...
</div>
```
All three requests fire in parallel when the page loads.
## Notes
### Layout shift
When the response swaps in, it can push content below it down. This is known as [Cumulative Layout Shift (CLS)](https://web.dev/articles/cls) and affects your [Lighthouse](https://developer.chrome.com/docs/lighthouse) score.
Reserve space with `min-height`:
```html
<div hx-get="/weather" hx-trigger="load" style="min-height: 200px">
Loading...
</div>
```
The demo above does exactly this.
### Infinite loops
Be careful when including `hx-trigger="load"` in the server response.
```
load → GET /weather → response has hx-trigger="load" → load → GET /weather → …
```
If the response requests the same endpoint, it can create an infinite loop.