HTML Stream

This feature can be used to make pages that load a large amount or make a api calls that can take time to load a bit friendlier to the users.

Note

In version 1.259.14 there is a limitation due to gzip encoding, that will not properly load the features of the stream.

To make the feature work the page name needs to be appended with a “.l” or “.load” suffix, this will disable the gzip encoder on the server for the request.

“my-data-page” -> “my-data-page.load”

This limitation will be removed in the future.

Load break

To activate the stream feature we only need to add the custom node. Server will stream everything until this point, and the rest when it has completed all the api requests and processes. Note that the node itself will not be printed.

Note

Webkit (safari and chrome in ios) has a different first paint rule scheme, it will not make the first paint if the rendered content is not within a certain threshold (~500b), hidden nodes, css or js does not count towards this check.

This mean that if it does not load there then the first visible bytes need to be increased

<load-break></load-break>

Examples

Regular html

In this example the loaded data will remain. Something would need to be implemented to hide it once loaded (js or css)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
    <input type="hidden" name="ErplyApi.Api.Post.myRequest1"
        value="getSalesDocuments" data-preset-val="getSalesDocuments">
    <input type="hidden" name="ErplyApi.Api.PostParam.myRequest1.recordsOnPage"
        value="200" data-preset-val="200">

    <main>
        <div>
            <h2>Please wait...</h2>
        </div>
        
        <!-- Background color bytes block, so the size is reached for webkit first paint (safari) -->
        <h2 style="color:white;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
            standard
            dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
            specimen
            book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially
            unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and
            more
            recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</h2>

    </template>
    <!-- Everything up until this point will be in the first paint -->
    <load-break></load-break>
    <ul>
        {{ range (.Data.ErplyApi.Api.Requests.myRequest1.Response.Get "records").Array }}
            <li>{{ .Get "id" }} !</li>
        {{ end }}
    </ul>
    </main>
</body>
</html>

Shadow dom

In here is an example where we use shadow dom to make the data replacement to the slot. This will not need any help from js.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
    <input type="hidden" name="ErplyApi.Api.Post.myRequest1"
        value="getSalesDocuments" data-preset-val="getSalesDocuments">
    <input type="hidden" name="ErplyApi.Api.PostParam.myRequest1.recordsOnPage"
        value="200" data-preset-val="200">

    <main>
    <template shadowrootmode="open">
        <!-- Note that by current spec shadow dom does not load styles from parent window, we would need to load
         these separately if we have some css/js dependencies-->
        <slot name="content">
            <div>
                <h2>Please wait...</h2>
            </div>
            <!-- Background color bytes block, so the size is reached for webkit first paint (safari) -->
            <h2 style="color:white;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
                standard
                dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
                specimen
                book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially
                unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and
                more
                recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</h2>
        </slot>
    </template>
    <!-- Everything up until this point will be in the first paint -->
    <load-break></load-break>
    <div slot="content">
        <ul>
            {{ range (.Data.ErplyApi.Api.Requests.myRequest1.Response.Get "records").Array }}
                <li>{{ .Get "id" }} !</li>
            {{ end }}
        </ul>
    </div>
    </main>
</body>
</html>