Lazy loading

The page arrives at once; the slow part - a chart PAD draws - is asked for when the page has loaded, and a skeleton stands in until it comes.

{fragment}{chart} hx-gethx-trigger="load"

Live

The page came at once. The chart below is asked for after it - watch the skeleton.

Requests htmx made

Nothing yet - use the example above, and every request it makes shows here with the part PAD answered.

How it is built

PAD, on the server htmx, in the browser

examples/lazy.padexamples/lazy.php

<p class="muted">The page came at once. The chart below is asked for after it - watch the skeleton.</p>

<div id="chart" class="chart-frame" hx-get="?examples/lazy" hx-trigger="load" hx-swap="innerHTML">
{fragment 'chart'}
  {if $slow}
    {chart 'bar', data='sales', label='month', value='online, shop, wholesale', stacked, title='Sales per month, in thousands'}
  {else}
    <div class="skeleton" style="height: 300px" aria-label="The chart is coming"></div>
  {/if}
{/fragment}
</div>

<?php

  // The slow part. The page itself renders a skeleton where the chart goes; once it has
  // loaded, htmx asks for the {fragment 'chart'} (hx-trigger="load", HX-Target: chart) and
  // that answer holds the chart PAD draws. The wait is made up - the answer of a slow
  // database or service - and only an htmx request has it.

  $slow = ( $_SERVER ['HTTP_HX_REQUEST'] ?? '' ) === 'true';

  if ( $slow )
    usleep ( 700000 );

  $sales = htmxData ( 'sales' );

?>